ordering-ui-react-native 0.15.34 → 0.15.36-release

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const ProductsContainer = styled.View`
 `
@@ -11,4 +11,31 @@ export const ErrorMessage = styled.View`
 
 export const WrapperNotFound = styled.View`
   height: 500px;
-`
+`
+
+export const RibbonBox = styled.View`
+  margin-left: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 2px 8px;
+  max-width: 180px;
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`
+
+export const SubCategoriesContainer = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+`
+
+export const ContainerButton = styled.View`
+`
+
+export const HeaderWrapper = styled.View``

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -12,22 +12,27 @@ import {
 	useConfig
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
+import Alert from '../../providers/AlertProvider'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { SearchBar } from '../SearchBar'
 import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { BusinessProductsListingParams } from '../../types'
+import { _retrieveStoreData, _removeStoreData } from '../../providers/StoreUtil';
 import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer
+	BusinessProductsListingContainer,
+	FiltProductsContainer,
+	ContainerSafeAreaView,
+	BackgroundGray
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { UpsellingRedirect } from './UpsellingRedirect'
 import Animated from 'react-native-reanimated'
 
-const PIXELS_TO_SCROLL = 1000
+const PIXELS_TO_SCROLL = 2000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
@@ -44,13 +49,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		errorQuantityProducts,
 		header,
 		logo,
+		alertState,
+		setAlertState,
+		multiRemoveProducts,
 		getNextProducts,
+		handleUpdateProducts
 	} = props
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
-	const [orderState] = useOrder()
+	const [orderState, { clearCart }] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
 	const [{ configs }] = useConfig()
@@ -91,9 +100,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
 	const [productListLayout, setProductListLayout] = useState<any>(null)
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
+	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
+	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
-
+	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
+	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -112,13 +124,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
+		if (isCheckoutMultiBusinessEnabled) {
+			onRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+			onRedirect('CheckoutNavigator', {
+				screen: 'CheckoutPage',
+				cartUuid: currentCart?.uuid,
+				businessLogo: logo,
+				businessName: business?.name,
+				cartTotal: currentCart?.total
+			})
+		}
 		setOpenUpselling(false)
 	}
 
@@ -163,12 +181,41 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
 
+	const adjustBusiness = async (adjustBusinessId: number) => {
+		const _carts = orderState?.carts?.[adjustBusinessId]
+		const products = _carts?.products
+		const unavailableProducts = products.filter((product: any) => product.valid !== true)
+		const alreadyRemoved = await _retrieveStoreData('already-removed')
+		_removeStoreData('already-removed')
+		if (unavailableProducts.length > 0) {
+			multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
+			return
+		}
+	
+		if (alreadyRemoved === 'removed') {
+			setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
+		}
+	}
+
+	const removeCartByReOrder = async () => {
+		const adjustBusinessId = await _retrieveStoreData('adjust-cart-products')
+		if (currentCart && adjustBusinessId) {
+			_removeStoreData('adjust-cart-products')
+			adjustBusiness(adjustBusinessId)
+		}
+	}
+
+	useEffect(() => {
+		removeCartByReOrder()
+	}, [currentCart])
+
 	return (
-		<SafeAreaView
+		<ContainerSafeAreaView
 			style={{ flex: 1 }}
+			isOpenFiltProducts={isOpenFiltProducts}
 		>
 			<Animated.View style={{ position: 'relative' }}>
-				<TopHeader>
+				<TopHeader isIos={Platform.OS === 'ios'}>
 					{!isOpenSearchBar && (
 						<>
 							<View style={{ ...styles.headerItem, flex: 1 }}>
@@ -206,6 +253,47 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</TopHeader>
 			</Animated.View>
+
+			{business?.categories?.length > 0 && isOpenFiltProducts && (
+					<FiltProductsContainer
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
+							<BusinessProductsList
+								categories={[
+									{ id: null, name: t('ALL', 'All') },
+									{ id: 'featured', name: t('FEATURED', 'Featured') },
+									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+								]}
+								category={categorySelected}
+								categoryState={categoryState}
+								businessId={business.id}
+								errors={errors}
+								onProductClick={onProductClick}
+								handleSearchRedirect={handleSearchRedirect}
+								featured={featuredProducts}
+								searchValue={searchValue}
+								handleClearSearch={handleChangeSearch}
+								errorQuantityProducts={errorQuantityProducts}
+								handleCancelSearch={handleCancel}
+								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+								setCategoriesLayout={setCategoriesLayout}
+								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
+								isFiltMode
+							/>
+						</View>
+					</FiltProductsContainer>
+			)}
+			{isOpenFiltProducts && (
+				<BackgroundGray />
+			)}
 			<BusinessProductsListingContainer
 				stickyHeaderIndices={[2]}
 				style={styles.mainContainer}
@@ -240,6 +328,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
 								setCategoryClicked={setCategoryClicked}
+
 							/>
 						)}
 					</>
@@ -267,8 +356,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								errorQuantityProducts={errorQuantityProducts}
 								handleCancelSearch={handleCancel}
 								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setCategoriesLayout={setCategoriesLayout}
 								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
 							/>
 						</WrapContent>
 					</>
@@ -290,6 +384,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								categoryState={categoryState}
 								isBusinessLoading={loading}
 								errorQuantityProducts={errorQuantityProducts}
+								handleUpdateProducts={handleUpdateProducts}
 							/>
 						</WrapContent>
 					</>
@@ -298,16 +393,18 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 				<FloatingButton
 					btnText={
-						currentCart?.subtotal >= currentCart?.minimum
-							? t('VIEW_ORDER', 'View Order')
-							: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+						openUpselling
+							? t('LOADING', 'Loading')
+							: currentCart?.subtotal >= currentCart?.minimum
+								? t('VIEW_ORDER', 'View Order')
+								: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
 					}
-					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
+					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
 					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-					btnLeftValue={currentCart?.products?.length}
+					btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
 					btnRightValue={parsePrice(currentCart?.total)}
-					disabled={currentCart?.subtotal < currentCart?.minimum}
+					disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					handleClick={() => setOpenUpselling(true)}
 				/>
 			)}
@@ -326,7 +423,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onRedirect={onRedirect}
 				/>
 			)}
-		</SafeAreaView>
+			<Alert
+				open={alertState?.open || false}
+				title=''
+				content={[t('NOT_AVAILABLE_PRODUCTS', 'These products are not available.')]}
+				onAccept={() => setAlertState({ open: false, content: [] })}
+				onClose={() => setAlertState({ open: false, content: [] })}
+			/>
+		</ContainerSafeAreaView>
 	)
 }
 

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

@@ -1,5 +1,8 @@
 import styled, { css } from 'styled-components/native'
 
+export const ContainerSafeAreaView = styled.SafeAreaView`
+`
+
 export const WrapHeader = styled.View`
   position: relative;
 `
@@ -11,6 +14,7 @@ export const TopHeader = styled.View`
   z-index: 1;
   height: 60px;
   min-height: 60px;
+  margin-top: ${(props : any) => props.isIos ? '0' : '40px'};
 `
 export const AddressInput = styled.TouchableOpacity`
   flex: 1;
@@ -33,3 +37,21 @@ export const BusinessProductsListingContainer = styled.ScrollView`
     margin-bottom: 50px;
   `}
 `
+
+export const FiltProductsContainer = styled.ScrollView`
+  position: absolute;
+  width: 100%;
+  z-index: 2000;
+  top: ${(props : any) => props.isIos ? '40px': '80px'};
+  margin-top: 20px;
+`
+
+export const BackgroundGray = styled.View`
+  flex: 1;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  position: absolute; 
+  margin-top: 100px; 
+  z-index: 100;
+  width: 100%;
+`

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

@@ -90,33 +90,12 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 		</View>
 	);
 
-	const ReviewItem = ({ comment, created_at, total, customer }: any) => (
+	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
-			<View
-				style={{ flexDirection: 'row', marginBottom: 19, alignItems: 'center' }}>
-				<OIcon
-					url={theme.images.dummies.customerPhoto}
-					width={38}
-					height={38}
-					style={{
-						borderRadius: 7.6,
-						borderWidth: 1,
-						borderColor: theme.colors.border,
-						marginEnd: 9,
-					}}
-				/>
-				<View>
-					<OText size={12} color={theme.colors.textNormal} weight={'500'}>
-						{customer?.name || 'Jane Cooper'}
-					</OText>
-					<OText size={10} color={theme.colors.textSecondary}>
-						{moment(created_at).format('MMMM d, yyyy • hh:mm')}
-					</OText>
-				</View>
-			</View>
-			<OText size={10} color={theme.colors.textNormal}>
-				{comment}
+			<OText size={12} color={theme.colors.textSecondary}>
+				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
 			</OText>
+			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>
 	);
 

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

@@ -45,7 +45,6 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const renderTypes = ({ item }: any) => {
 		return (
 			<TouchableOpacity
-				key={item.id}
 				onPress={() => handleChangeBusinessType(item.id)}
 				style={{
 					height: 34,
@@ -103,7 +102,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									showsHorizontalScrollIndicator={false}
 									data={typesState?.types}
 									renderItem={renderTypes}
-									keyExtractor={(type) => type.name}
+									keyExtractor={(type, index) => `${type.name}_${index}`}
 								/>
 								<TouchableOpacity
 									style={{ marginLeft: 15 }}

package/themes/original/src/components/BusinessesListing/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 { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
 	StyleSheet,
@@ -47,7 +48,7 @@ import { getTypesText, convertToRadian } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 
-const PIXELS_TO_SCROLL = 1000;
+const PIXELS_TO_SCROLL = 2000;
 
 const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
@@ -59,9 +60,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-		businessId
+		businessId,
+		isGuestUser,
+		handleUpdateBusinessList
 	} = props;
-
 	const theme = useTheme();
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
@@ -117,11 +119,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
 	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) => {
@@ -191,19 +195,35 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}
 
+	const checkUserLocation = async () => {
+		let trackingStatus = await getTrackingStatus()
+		if (trackingStatus === 'not-determined') {
+			trackingStatus = await requestTrackingPermission()
+		}
+		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+			Geolocation.getCurrentPosition((pos) => {
+				const crd = pos.coords
+				const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+				if (distance > 20) setIsFarAway(true)
+				else setIsFarAway(false)
+			}, (err) => {
+				console.log(`ERROR(${err.code}): ${err.message}`)
+			}, {
+				enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+			})
+		}
+	}
+
 	useEffect(() => {
-		Geolocation.getCurrentPosition((pos) => {
-			const crd = pos.coords
-			const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-			if (distance > 20) setIsFarAway(true)
-			else setIsFarAway(false)
-		}, (err) => {
-			console.log(`ERROR(${err.code}): ${err.message}`)
-		}, {
-			enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-		})
+		checkUserLocation()
 	}, [orderState?.options?.address?.location])
 
+	useEffect(() => {
+		if(!orderState?.loading){
+			setOrderTypeValue(orderState?.options?.type)
+		}
+	}, [orderState?.options?.type])
+
 	useFocusEffect(
 		useCallback(() => {
 			resetInactivityTimeout()
@@ -211,6 +231,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}, [navigation])
 	)
 
+	useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach((business: any) => {
+      if (business?.favorite) {
+        ids.push(business?.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
@@ -221,7 +252,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			}
 		>
 			<HeaderWrapper
-				source={theme.images.backgrounds.business_list_header}
+				source={theme.images.general.homeHero}
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
@@ -237,6 +268,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								: navigation.navigate('AddressForm', {
 									address: orderState.options?.address,
 									isFromBusinesses: true,
+									isGuestUser: isGuestUser
 								})
 						}>
 						<OIcon
@@ -258,33 +290,35 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				)}
 				<OrderControlContainer>
 					<View style={styles.wrapperOrderOptions}>
-						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderState?.options?.type || 1), 'Delivery')}</OText>
+						<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>
-						<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>
+						{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>
+						)}
 
 						{!businessId && (
 							<SearchBar
@@ -296,9 +330,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								onCancel={() => handleChangeSearch('')}
 								placeholder={t('SEARCH', 'Search')}
 								height={26}
-								isDisabled={configs?.advanced_business_search_enabled?.value === '1' || !businessTypes}
+								isDisabled={!businessTypes}
 								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 }) }}
 							/>
 						)}
 
@@ -316,7 +350,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
@@ -324,7 +358,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
-										key={bAry[0].id}
 										business={bAry[0]}
 										isBusinessOpen={bAry[0]?.open}
 										handleCustomClick={handleBusinessClick}
@@ -332,7 +365,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									/>
 									{bAry.length > 1 && (
 										<BusinessFeaturedController
-											key={bAry[1].id}
 											business={bAry[1]}
 											isBusinessOpen={bAry[1]?.open}
 											handleCustomClick={handleBusinessClick}
@@ -348,7 +380,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			{
 				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+					<HighestRatedBusinesses
+						onBusinessClick={handleBusinessClick}
+						navigation={navigation}
+						favoriteIds={favoriteIds}
+						setFavoriteIds={setFavoriteIds}
+					/>
 				)
 			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
@@ -371,9 +408,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)}
 				{businessesList.businesses?.map(
-					(business: any) => (
+					(business: any, i : number) => (
 						<BusinessController
-							key={business.id}
+							key={`${business.id}_` + i}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -387,6 +424,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							businessDeliveryTime={business?.delivery_time}
 							businessPickupTime={business?.pickup_time}
 							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
 						/>
 					)
 				)}