ordering-ui-react-native 0.16.31 → 0.16.32-release

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

@@ -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 {
@@ -21,6 +22,7 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Search,
@@ -32,7 +34,7 @@ import {
 	FeaturedWrapper,
 	OrderProgressWrapper,
 	FarAwayMessage,
-  SearchBarWrapper,
+	SearchBarWrapper,
 	MomentWrapper,
 	FilterWrapper,
 	ServiceWrapper,
@@ -70,8 +72,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		isGuestUser,
 		handleUpdateBusinessList,
 		priceLevelSelected,
-    handleChangePriceLevel,
-    businessTypeSelected
+		handleChangePriceLevel,
+		businessTypeSelected
 	} = props;
 	const theme = useTheme();
 	const isFocused = useIsFocused();
@@ -104,8 +106,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 		searchInput: {
 			fontSize: 12,
-			// backgroundColor: theme.colors.white,
-			paddingLeft: 10,
+			paddingLeft: 0,
+			paddingRight: 17,
 			paddingTop: 7
 		},
 		iconStyle: {
@@ -269,7 +271,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}, [businessesList?.businesses?.length])
 
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -282,7 +284,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+						<IconAntDesign name='arrowleft' size={26} />
 					</TouchableOpacity>
 				)}
 				<Search>
@@ -319,7 +321,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</MomentWrapper>
 					<View style={styles.wrapperOrderOptions}>
 						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
+							<OText
+								size={12}
+								numberOfLines={1}
+								ellipsizeMode={'tail'}
+								color={theme.colors.textSecondary}
+								style={{ textAlign: 'left' }}
+							>
+								{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}
+							</OText>
 							<OIcon
 								src={theme.images.general.arrow_down}
 								width={10}
@@ -327,22 +337,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>
@@ -463,6 +474,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					(business: any, i: number) => (
 						<BusinessController
 							key={`${business.id}_` + i}
+							enableIntersection
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -534,7 +546,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</>
 				)}
 			</ListWrapper>
-		</ScrollView>
+		</IOScrollView>
 	);
 };
 

package/themes/original/src/components/BusinessesListing/Layout/Appointment/styles.tsx

@@ -43,8 +43,9 @@ export const WrapMomentOption = styled.TouchableOpacity`
   font-size: 12px;
   max-width: 240px;
   height: 26px;
+  width: 130px;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   padding-horizontal: 8px;
   flex-direction: row;
   margin-end: 12px;
@@ -84,7 +85,7 @@ export const FarAwayMessage = styled.View`
 `
 
 export const SearchBarWrapper = styled.View`
-  width: 100px;
+  width: 130px;
 `
 
 export const MomentWrapper = styled.View`
@@ -97,10 +98,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
   margin-top: 30px;
 `

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
@@ -18,6 +19,7 @@ import {
 	useOrder,
 	useConfig,
 	useUtils,
+	useOrderingTheme
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
@@ -32,11 +34,14 @@ import {
 	FeaturedWrapper,
 	OrderProgressWrapper,
 	FarAwayMessage,
-	AddressInputContainer
+	AddressInputContainer,
+	PreorderInput,
+	OrderTypesContainer,
+	BusinessLogosContainer
 } from './styles';
 
 import { SearchBar } from '../../../SearchBar';
-import { OIcon, OText } from '../../../shared';
+import { OButton, OIcon, OText, OBottomPopup, OModal } from '../../../shared';
 import { BusinessesListingParams } from '../../../../types';
 import { NotFoundSource } from '../../../NotFoundSource';
 import { BusinessTypeFilter } from '../../../BusinessTypeFilter';
@@ -48,6 +53,8 @@ import { HighestRatedBusinesses } from '../../../HighestRatedBusinesses';
 import { getTypesText, convertToRadian } from '../../../../utils';
 import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
+import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -63,13 +70,21 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleChangeSearch,
 		businessId,
 		isGuestUser,
-		handleUpdateBusinessList
+		handleUpdateBusinessList,
+		citiesState,
+		actualSlug,
+		logosLayout
 	} = props;
 	const theme = useTheme();
+	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
+	const searchBarRef = useRef<any>()
 	const [appStateVisible, setAppStateVisible] = useState(appState.current);
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
+	const bgHeader =  orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image 
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -113,13 +128,29 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			backgroundColor: theme.colors.white,
 			borderColor: theme.colors.backgroundGray,
 			borderWidth: 1,
-		}
+		},
+		buttonCityStyle: {
+			backgroundColor: theme.colors.white,
+			borderColor: theme.colors.backgroundGray,
+			borderRadius: 8,
+			marginHorizontal: 40,
+			minHeight: 45,
+			paddingVertical: 5,
+			paddingHorizontal: 20,
+			borderWidth: 1
+		},
+		businessSkeleton: {
+			borderRadius: 8,
+			marginRight: 20,
+			width: 56,
+			height: 56
+		},
 	});
 
 
 	const [, t] = useLanguage();
 	const [{ user, auth }] = useSession();
-	const [orderState] = useOrder();
+	const [orderState, { changeCityFilter }] = useOrder();
 	const [{ configs }] = useConfig();
 	const [{ parseDate }] = useUtils();
 
@@ -129,21 +160,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
 	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
+	const [isOpenCities, setIsOpenCities] = useState(false)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
 	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 	const timerId = useRef<any>(false)
 	const [favoriteIds, setFavoriteIds] = useState<any>([])
-
-	// const panResponder = useRef(
-	// 	PanResponder.create({
-	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
-	// 			const { dx, dy } = gestureState;
-	// 			resetInactivityTimeout()
-	// 			return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
-	// 		},
-	// 	})
-	// ).current
+	const chewOrderTypes = [{ name: t('DELIVERY', 'Delivery').toUpperCase(), value: 1 }, { name: t('PICKUP', 'Pickup').toUpperCase(), value: 2 }]
 
 	const handleMomentClick = () => {
 		if (isPreorderEnabled) {
@@ -163,7 +186,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			paginationProps.totalPages === paginationProps.currentPage
 		);
 
-		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
+		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore && businessesList?.businesses?.length > 0) {
 			getBusinesses();
 		}
 	};
@@ -180,10 +203,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	const resetInactivityTimeout = () => {
-		clearTimeout(timerId.current)
-		timerId.current = setInterval(() => {
-			getBusinesses(true)
-		}, 120000)
+		if (!logosLayout) {
+			clearTimeout(timerId.current)
+			timerId.current = setInterval(() => {
+				getBusinesses(true)
+			}, 120000)
+		}
+	}
+
+	const handleChangeCity = (cityId: number | null) => {
+		changeCityFilter(orderState?.options?.city_id === cityId ? null : cityId)
+		setIsOpenCities(false)
 	}
 
 	useEffect(() => {
@@ -224,7 +254,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	useEffect(() => {
-		checkUserLocation()
+		if (!logosLayout) {
+			checkUserLocation()
+		}
 	}, [orderState?.options?.address?.location])
 
 	useEffect(() => {
@@ -251,8 +283,69 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		setFavoriteIds([...new Set(ids)])
 	}, [businessesList?.businesses?.length])
 
+	useEffect(() => {
+		setIsOpenCities(false)
+	}, [orderState?.options?.city_id])
+
+	if (logosLayout) {
+		return (
+			<BusinessLogosContainer
+				horizontal
+				showsHorizontalScrollIndicator={false}
+			>
+				{businessesList?.loading ? (
+					<Placeholder Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							{[...Array(10).keys()].map(i => (
+								<View style={styles.businessSkeleton} key={i}>
+									<PlaceholderLine style={{ width: '100%', height: '100%' }} />
+								</View>
+							))}
+						</View>
+					</Placeholder>
+				) : (
+					<>
+						{businessesList.businesses
+							?.filter(business => business?.open)
+							?.map(business => (
+								<TouchableOpacity
+									key={business?.id}
+									onPress={() => handleBusinessClick && handleBusinessClick(business)}
+									style={{
+										width: 57,
+										height: 58,
+										borderBottomColor: theme.colors.primary,
+										borderBottomWidth: business?.slug === actualSlug ? 2 : 0,
+										marginRight: 5
+									}}
+								>
+									<FastImage
+										style={{
+											width: 56,
+											height: 56,
+											marginRight: 20,
+											borderTopLeftRadius: 7.6,
+											borderTopRightRadius: 7.6
+										}}
+										source={{
+											uri: business?.logo,
+											priority: FastImage.priority.normal,
+										}}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</TouchableOpacity>
+							))}
+					</>
+				)}
+			</BusinessLogosContainer>
+		)
+	}
+
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView
+			style={styles.container}
+			onScroll={(e) => handleScroll(e)}
+			showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -260,9 +353,22 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				/>
 			}
 		>
-			<View style={{ height: isFarAway ? 150 : 100, marginTop: Platform.OS == 'ios' ? 0 : 50 }}>
-				<Search>
+			<View style={{
+				height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
+				marginTop: Platform.OS == 'ios' ? 0 : 50,
+				backgroundColor: isChewLayout ? theme?.colors?.chew : theme.colors?.white
+			}}
+			>
+				{isChewLayout && (
+					<View style={{ marginTop: 30, paddingHorizontal: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
+						<OText size={18} weight={700} color={theme.colors?.white}>
+							{t('WELCOME', 'Welcome')} {user?.name}!
+						</OText>
+					</View>
+				)}
+				<Search isChewLayout={isChewLayout}>
 					<AddressInput
+						isChewLayout={isChewLayout}
 						onPress={() =>
 							auth
 								? navigation.navigate('AddressList', { isFromBusinesses: true })
@@ -272,95 +378,119 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									isGuestUser: isGuestUser
 								})
 						}>
-						<AddressInputContainer>
+						<AddressInputContainer isChewLayout={isChewLayout}>
 							<OIcon
 								src={theme.images.general.pin}
 								color={theme.colors.disabled}
 								width={16}
-								style={{ marginRight: 10 }}
+								style={{ marginRight: isChewLayout ? 0 : 10 }}
 							/>
-							<OText size={12} numberOfLines={1}>
+							<OText size={12} numberOfLines={1} style={{ flex: 1 }}>
 								{orderState?.options?.address?.address}
 							</OText>
-							<OIcon
-								src={theme.images.general.arrow_down}
-								width={10}
-								style={{ marginStart: 8 }}
-							/>
+							{!isChewLayout && (
+								<OIcon
+									src={theme.images.general.arrow_down}
+									width={10}
+									style={{ marginStart: 8 }}
+								/>
+							)}
 						</AddressInputContainer>
 					</AddressInput>
 				</Search>
-				{isFarAway && (
+				{isFarAway && !isChewLayout && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
 						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
-
-				<OrderControlContainer>
-					<View style={styles.wrapperOrderOptions}>
-						{isPreOrderSetting && (
-							<WrapMomentOption
-								onPress={() => handleMomentClick()}>
-								<OText
-									size={12}
-									numberOfLines={1}
-									ellipsizeMode="tail"
-									color={theme.colors.textSecondary}>
-									{orderState.options?.moment
-										? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-										: t('ASAP_ABBREVIATION', 'ASAP')}
-								</OText>
-								{isPreorderEnabled && (
-									<OIcon
-										src={theme.images.general.arrow_down}
-										width={10}
-										style={{ marginStart: 8 }}
-									/>
-								)}
+				{!isChewLayout ? (
+					<OrderControlContainer>
+						<View style={styles.wrapperOrderOptions}>
+							{isPreOrderSetting && (
+								<WrapMomentOption
+									onPress={() => handleMomentClick()}>
+									<OText
+										size={12}
+										numberOfLines={1}
+										ellipsizeMode="tail"
+										color={theme.colors.textSecondary}>
+										{orderState.options?.moment
+											? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+											: t('ASAP_ABBREVIATION', 'ASAP')}
+									</OText>
+									{isPreorderEnabled && (
+										<OIcon
+											src={theme.images.general.arrow_down}
+											width={10}
+											style={{ marginStart: 8 }}
+										/>
+									)}
+								</WrapMomentOption>
+							)}
+							<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
+								<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
+								<OIcon
+									src={theme.images.general.arrow_down}
+									width={10}
+									style={{ marginStart: 8 }}
+								/>
 							</WrapMomentOption>
+						</View>
+					</OrderControlContainer>
+				) : (
+					<>
+						{isPreOrderSetting && (
+							<View style={{ paddingHorizontal: 30 }}>
+								<PreorderInput
+									isChewLayout={isChewLayout}
+									onPress={() => handleMomentClick()}
+								>
+									<OText color={theme.colors.textSecondary}>
+										{orderState.options?.moment
+											? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+											: t('ASAP_ABBREVIATION', 'ASAP')}</OText>
+								</PreorderInput>
+							</View>
 						)}
-						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
-							<OIcon
-								src={theme.images.general.arrow_down}
-								width={10}
-								style={{ marginStart: 8 }}
-							/>
-						</WrapMomentOption>
-					</View>
-				</OrderControlContainer>
+					</>
+				)}
 			</View>
-			<HeaderWrapper
-				source={theme.images.general.homeHero}
-				style={{ paddingTop: top + 20 }}
-				resizeMode='stretch'
-			>
-				{!auth && (
-					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+			{!isChewLayout ? (
+				<HeaderWrapper
+					source={bgHeader ? {uri: bgHeader} : theme.images.backgrounds.business_list_header}
+					style={{ paddingTop: top + 20 }}
+					resizeMode='cover'
+				>
+					{!auth && (
+
+						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+							<IconAntDesign name='arrowleft' size={26} />
+						</TouchableOpacity>
+					)}
+				</HeaderWrapper>
+			) : (
+				<OrderTypesContainer>
+					<OrderTypeSelector
+						handleChangeBusinessType={handleChangeBusinessType}
+						isChewLayout
+						chewOrderTypes={chewOrderTypes}
+						handleChangeType={setOrderTypeValue}
+					/>
+				</OrderTypesContainer>
+			)}
+
+			{!hideCities && orderTypeValue === 2 && (
+				<View style={{ marginTop: 20 }}>
+					<TouchableOpacity
+						style={styles.buttonCityStyle}
+						onPress={() => setIsOpenCities(true)}
+					>
+						<OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
+							{citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
+						</OText>
 					</TouchableOpacity>
-				)}
-			</HeaderWrapper>
-			{!businessId && (
-				<SearchBar
-					onSearch={handleChangeSearch}
-					searchValue={searchValue}
-					lazyLoad
-					hideIcon
-					isCancelXButtonShow={!!searchValue}
-					onCancel={() => handleChangeSearch('')}
-					placeholder={t('SEARCH', 'Search')}
-					height={50}
-					isDisabled={!businessTypes}
-					inputContainerStyles={styles.inputContainerStyles}
-					containerStyles={{
-						marginHorizontal: 40,
-						marginTop: 20
-					}}
-					inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? { paddingBottom: 6 } : { paddingBottom: 4 } }}
-					onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
-				/>
+				</View>
 			)}
 			<OrderProgressWrapper>
 				<OrderProgress
@@ -368,7 +498,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					isFocused={isFocused}
 				/>
 			</OrderProgressWrapper>
-
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
@@ -376,7 +505,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
-							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							horizontal
+							contentContainerStyle={{ paddingHorizontal: 40 }}
+						>
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
@@ -433,6 +564,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					(business: any, i: number) => (
 						<BusinessController
 							key={`${business.id}_` + i}
+							enableIntersection
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -504,7 +636,32 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</>
 				)}
 			</ListWrapper>
-		</ScrollView>
+			<OModal
+				open={isOpenCities}
+				onClose={() => setIsOpenCities(false)}
+				title={t('SELECT_A_CITY', 'Select a city')}
+			>
+				<View style={{ padding: 40, width: '100%' }}>
+					{citiesState?.cities?.map((city: any) => (
+						<TouchableOpacity
+							key={city?.id}
+							style={{
+								padding: 10,
+								borderBottomWidth: 1,
+								borderBottomColor: orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.backgroundGray,
+								marginBottom: 10,
+							}}
+							onPress={() => handleChangeCity(city?.id)}
+							disabled={orderState?.loading}
+						>
+							<OText color={orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.black}>
+								{city?.name}
+							</OText>
+						</TouchableOpacity>
+					))}
+				</View>
+			</OModal>
+		</IOScrollView>
 	);
 };