ordering-ui-react-native 0.16.54 → 0.16.55-release

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

@@ -11,6 +11,8 @@ import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
+import { OrderItAgain } from '../OrderItAgain'
+import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -35,7 +37,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     onClickCategory,
     lazyLoadProductsRecommended,
     handleUpdateProducts,
-    isFiltMode
+    previouslyProducts,
+    isFiltMode,
+    navigation
   } = props;
 
   const [, t] = useLanguage();
@@ -67,51 +71,29 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     }
   }
 
-  const SubcategoriesComponent = ({ category }: any) => {
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
-
-    return (
-      <SubCategoriesContainer>
-        <ContainerButton
-          isSelected={allsubcategorySelected}
-        >
-          <OButton
-            onClick={() => onClickSubcategory(null, category)}
-            bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-            text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
-            style={bpStyles.categoryButtonStyle}
-            textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-          />
-        </ContainerButton>
-        {category?.subcategories?.map((subcategory: any) => {
-          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
-          return (
-            <ContainerButton
-              key={subcategory?.id}
-              isSelected={isSubcategorySelected}
-            >
-              <OButton
-                onClick={() => onClickSubcategory(subcategory, category)}
-                bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-                text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
-                style={bpStyles.categoryButtonStyle}
-                textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-              />
-            </ContainerButton>
-          )
-        }
-        )}
-      </SubCategoriesContainer>
-    )
-  }
-
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
       <HeaderWrapper>
         {category?.subcategories?.length > 0 && (
-          <SubcategoriesComponent category={category} />
+          <SubcategoriesComponentMemoized
+            category={category}
+            subcategoriesSelected={subcategoriesSelected}
+            onClickSubcategory={onClickSubcategory}
+          />
         )}
       </HeaderWrapper>
+      {previouslyProducts?.length > 0 && (
+        <OrderItAgain
+          onProductClick={onProductClick}
+          productList={previouslyProducts}
+          businessId={businessId}
+          categoryState={categoryState}
+          navigation={navigation}
+          handleUpdateProducts={handleUpdateProducts}
+          currentCart={currentCart}
+          searchValue={searchValue}
+        />
+      )}
       {category.id &&
         categoryState.products
           ?.filter((product: any) =>
@@ -122,12 +104,14 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
+              enableIntersection={!isFiltMode && categoryState.products?.length < 80}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
               onProductClick={() => onProductClick(product)}
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
               handleUpdateProducts={handleUpdateProducts}
+              navigation={navigation}
             />
           ))
       }
@@ -148,11 +132,13 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
                       handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                      navigation={navigation}
                     />
                   ),
               )}
@@ -180,14 +166,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   style={bpStyles.catWrap}
                   onLayout={(event: any) => handleOnLayout(event, category.id)}
                 >
-                  <View style={bpStyles.catIcon}>
-                    <OIcon
-                      url={optimizeImage(category.image, 'h_250,c_limit')}
-                      width={41}
-                      height={41}
-                      style={{ borderRadius: 7.6 }}
-                    />
-                  </View>
+                  {!!category.image && (
+                    <View style={bpStyles.catIcon}>
+                      <OIcon
+                        url={optimizeImage(category.image, 'h_250,c_limit')}
+                        width={41}
+                        height={41}
+                        style={{ borderRadius: 7.6 }}
+                      />
+                    </View>
+                  )}
                   <OText size={16} weight="600">
                     {category.name}
                   </OText>
@@ -233,19 +221,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   </View>
                 )}
                 {category?.subcategories?.length > 0 && !isFiltMode && (
-                  <SubcategoriesComponent category={category} />
+                  <SubcategoriesComponentMemoized
+                    category={category}
+                    subcategoriesSelected={subcategoriesSelected}
+                    onClickSubcategory={onClickSubcategory}
+                  />
                 )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
                       handleUpdateProducts={handleUpdateProducts}
+                      navigation={navigation}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ))}
@@ -260,19 +253,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         <>
           {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
             (item, i) => (
-              <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
-                <View style={{ flexDirection: 'row' }}>
+              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }} key={i}>
+                <Placeholder style={{ padding: 5 }} Animation={Fade}>
+                  <View style={{ flexDirection: 'row' }}>
+                    <Placeholder style={{ paddingVertical: 10, flex: 1 }}>
+                      <PlaceholderLine width={60} style={{ marginBottom: 15 }} />
+                      <PlaceholderLine width={20} />
+                    </Placeholder>
+                    <PlaceholderLine
+                      width={24}
+                      height={70}
+                      style={{ marginLeft: 10, marginBottom: 10 }}
+                    />
+                  </View>
                   <PlaceholderLine
-                    width={24}
-                    height={70}
-                    style={{ marginRight: 10, marginBottom: 10 }}
+                    height={52}
                   />
-                  <Placeholder style={{ paddingVertical: 10 }}>
-                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
+                </Placeholder>
+              </View>
             ),
           )}
         </>

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

@@ -18,15 +18,12 @@ export const RibbonBox = styled.View`
   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;
   `}

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

@@ -1,5 +1,7 @@
 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 { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -9,9 +11,9 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig,
-	useOrderingTheme
+	useConfig
 } from 'ordering-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import Alert from '../../providers/AlertProvider'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -20,16 +22,19 @@ import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { BusinessProductsListingParams } from '../../types'
 import { _retrieveStoreData, _removeStoreData } from '../../providers/StoreUtil';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useIsFocused } from '@react-navigation/native';
+
 import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer,
 	FiltProductsContainer,
 	ContainerSafeAreaView,
 	BackgroundGray,
 	ProfessionalFilterWrapper,
-	NearBusiness
+	NearBusiness,
+	TopActions
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { UpsellingRedirect } from './UpsellingRedirect'
@@ -61,27 +66,29 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		getNextProducts,
 		handleUpdateProducts,
 		professionalSelected,
+		handleUpdateProfessionals,
 		handleChangeProfessionalSelected,
 		onBusinessClick
 	} = props
 
+	const insets = useSafeAreaInsets()
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
-	const [orderState, { clearCart }] = useOrder()
+	const [orderState, { addProduct, updateProduct }] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
 	const [{ configs }] = useConfig()
+	const isFocused = useIsFocused();
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
-	const isChewLayout = theme?.layouts?.business_view?.components?.header?.components?.layout?.type === 'chew'
-	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-	const showBusinessNearCity = !theme?.layouts?.business_view?.components?.near_business?.hidden
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
 
 	const styles = StyleSheet.create({
 		mainContainer: {
-			flex: 1,
+			flex: 1
 		},
 		BackIcon: {
 			paddingRight: 20,
@@ -103,7 +110,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			padding: 15,
 			justifyContent: 'center',
 			shadowColor: theme.colors.clear,
-		}
+		},
+		businessSkeleton: {
+			borderRadius: 8,
+			marginRight: 20,
+			width: 56,
+			height: 56
+		},
 	})
 
 	const { business, loading, error } = businessState
@@ -118,26 +131,51 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 	const [openService, setOpenService] = useState(false)
 	const [currentProduct, setCurrentProduct] = useState(null)
+	const [searchBarHeight, setSearchBarHeight] = useState(60)
 
 	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
+	const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
+	const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
+
 	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 filtProductsHeight = Platform.OS === 'ios' ? 0 : 100
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
-
-	const onProductClick = (product: any) => {
-		if (product?.type === 'service' && professionalSelected) {
-			setCurrentProduct(product)
-			setOpenService(true)
-			return
+	const onProductClick = async (product: any) => {
+		if (product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
+			const isProductAddedToCart = currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)
+			const productQuantity = isProductAddedToCart?.quantity
+			const addCurrentProduct = {
+				...product,
+				quantity: 1
+			}
+			const updateCurrentProduct = {
+				id: product.id,
+				code: isProductAddedToCart?.code,
+				quantity: productQuantity + 1
+			}
+			const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
+			if (isProductAddedToCart) {
+				await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)
+			} else {
+				await addProduct(addCurrentProduct, cartData, isQuickAddProduct)
+			}
+		} else {
+			const productAddedToCartLength = currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0) || 0
+			if (product?.type === 'service' && business?.professionals?.length > 0) {
+				setCurrentProduct(product)
+				setOpenService(true)
+				return
+			}
+			onRedirect('ProductDetails', {
+				product: product,
+				businessSlug: business.slug,
+				businessId: business.id,
+				productAddedToCartLength
+			})
 		}
-		onRedirect('ProductDetails', {
-			product: product,
-			businessSlug: business.slug,
-			businessId: business.id,
-		})
 	}
 
 	const handleCancel = () => {
@@ -146,7 +184,36 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const handleUpsellingPage = () => {
-		if (isCheckoutMultiBusinessEnabled) {
+		setOpenUpselling(false)
+		setCanOpenUpselling(false)
+		const cartSelectedHasGroup = currentCart?.group?.uuid
+		const cartFilterValidation = (cart: any) => cart?.valid && cart?.status !== 2
+		const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter((_cart: any) => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
+		if (cartsGroupLength > 1 && isCheckoutMultiBusinessEnabled) {
+			props.onNavigationRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout',
+				cartUuid: currentCart?.group?.uuid
+			})
+			return
+		}
+		const cartGroupsCount: any = {}
+		Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach((_cart: any) => {
+			if (cartGroupsCount[_cart?.group?.uuid]) {
+				cartGroupsCount[_cart?.group?.uuid] += 1
+			} else {
+				cartGroupsCount[_cart?.group?.uuid] = 1
+			}
+		})
+		let groupForTheCart
+		const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
+		const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
+		const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
+		if (indexes?.length > 1) {
+			groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
+		} else {
+			groupForTheCart = indexes[0]
+		}
+		if (isCheckoutMultiBusinessEnabled && openCarts.length > 1) {
 			onRedirect('CheckoutNavigator', {
 				screen: 'MultiCheckout'
 			})
@@ -231,33 +298,41 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		removeCartByReOrder()
 	}, [currentCart])
 
+	useEffect(() => {
+		if (!isFocused) {
+			handleChangeSearch('')
+			setIsOpenSearchBar(false)
+		}
+	}, [isFocused])
+
+	const subtotalWithTaxes = currentCart?.taxes?.reduce((acc: any, item: any) => {
+		if (item?.type === 1)
+			return acc = acc + item?.summary?.tax
+		return acc = acc
+	}, currentCart?.subtotal)
+
 	return (
 		<>
-			<ContainerSafeAreaView
-				style={{ flex: 1 }}
-				isOpenFiltProducts={isOpenFiltProducts}
-			>
+			<View style={{ flex: 1 }}>
 				<Animated.View style={{ position: 'relative' }}>
-					<TopHeader isIos={Platform.OS === 'ios'}>
+					<TopHeader
+						style={{
+							marginTop: Platform.OS === 'ios' ? insets.top : 0
+						}}
+						onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height)}
+					>
 						{!isOpenSearchBar && (
 							<>
-								<View style={{ ...styles.headerItem, flex: 1 }}>
-									<OButton
-										imgLeftSrc={theme.images.general.arrow_left}
-										imgRightSrc={null}
-										style={styles.btnBackArrow}
-										onClick={() => handleBackNavigation()}
-										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 30 }}
-									/>
-
-								</View>
+								<TopActions onPress={() => handleBackNavigation()}>
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+								</TopActions>
 								{!errorQuantityProducts && (
 									<View style={{ ...styles.headerItem }}>
 										<TouchableOpacity
 											onPress={() => setIsOpenSearchBar(true)}
 											style={styles.searchIcon}
 										>
-											<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={16} />
+											<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={20} />
 										</TouchableOpacity>
 									</View>
 								)}
@@ -277,7 +352,20 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapSearchBar>
 						)}
 					</TopHeader>
-					{showBusinessNearCity && (
+					{!hideBusinessNearCity && loading && (
+						<NearBusiness style={{ paddingBottom: 10 }}>
+							<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>
+						</NearBusiness>
+					)}
+					{!loading && !hideBusinessNearCity && businessState?.business?.city_id && (
 						<NearBusiness>
 							<BusinessesListing
 								logosLayout
@@ -292,10 +380,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 				{business?.categories?.length > 0 && isOpenFiltProducts && (
 					<FiltProductsContainer
-						isIos={Platform.OS === 'ios'}
 						style={{
-							height: Dimensions.get('window').height - filtProductsHeight
+							height: Dimensions.get('window').height - filtProductsHeight,
+							top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight
 						}}
+						contentContainerStyle={{ flexGrow: 1 }}
 					>
 						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
 							<BusinessProductsList
@@ -323,22 +412,28 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								setSubcategoriesSelected={setSubcategoriesSelected}
 								onClickCategory={handleChangeCategory}
 								handleUpdateProducts={handleUpdateProducts}
+								previouslyProducts={business?.previously_products}
+								navigation={navigation}
 								isFiltMode
 							/>
 						</View>
 					</FiltProductsContainer>
 				)}
 				{isOpenFiltProducts && (
-					<BackgroundGray />
+					<BackgroundGray isIos={Platform.OS === 'ios'} />
 				)}
-				<BusinessProductsListingContainer
-					stickyHeaderIndices={[2]}
-					style={styles.mainContainer}
+				<IOScrollView
+					stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
+					style={{
+						...styles.mainContainer,
+						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
+							50 : 0
+					}}
 					ref={scrollViewRef}
-					isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
 					onScroll={handlePageScroll}
 					onScrollBeginDrag={handleTouchDrag}
 					scrollEventThrottle={16}
+					bounces={false}
 				>
 					<BusinessBasicInformation
 						navigation={navigation}
@@ -371,31 +466,27 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							marginTop: isChewLayout && showLogo ? 10 : 0
 						}}
 					/>
-					{!loading && business?.id && (
-						<>
-							{!(business?.categories?.length === 0) && (
-								<BusinessProductsCategories
-									categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
-									categorySelected={categorySelected}
-									onClickCategory={handleChangeCategory}
-									featured={featuredProducts}
-									openBusinessInformation={openBusinessInformation}
-									scrollViewRef={scrollViewRef}
-									productListLayout={productListLayout}
-									categoriesLayout={categoriesLayout}
-									selectedCategoryId={selectedCategoryId}
-									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-									setSelectedCategoryId={setSelectedCategoryId}
-									setCategoryClicked={setCategoryClicked}
-
-								/>
-							)}
-						</>
+					{!loading && business?.id && !(business?.categories?.length === 0) && (
+						<BusinessProductsCategories
+							categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+							categorySelected={categorySelected}
+							onClickCategory={handleChangeCategory}
+							featured={featuredProducts}
+							openBusinessInformation={openBusinessInformation}
+							scrollViewRef={scrollViewRef}
+							productListLayout={productListLayout}
+							categoriesLayout={categoriesLayout}
+							selectedCategoryId={selectedCategoryId}
+							lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+							setSelectedCategoryId={setSelectedCategoryId}
+							setCategoryClicked={setCategoryClicked}
+						/>
 					)}
 					{!loading && business?.id && (
 						<>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
+								style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
 							>
 								<BusinessProductsList
 									categories={[
@@ -422,6 +513,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									setSubcategoriesSelected={setSubcategoriesSelected}
 									onClickCategory={handleChangeCategory}
 									handleUpdateProducts={handleUpdateProducts}
+									navigation={navigation}
+									previouslyProducts={business?.previously_products}
 								/>
 							</WrapContent>
 						</>
@@ -444,28 +537,31 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									isBusinessLoading={loading}
 									errorQuantityProducts={errorQuantityProducts}
 									handleUpdateProducts={handleUpdateProducts}
+									navigation={navigation}
 								/>
 							</WrapContent>
 						</>
 					)}
-				</BusinessProductsListingContainer>
+				</IOScrollView>
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-					<FloatingButton
-						btnText={
-							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 || openUpselling}
-						btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-						btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-						btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
-						btnRightValue={parsePrice(currentCart?.total)}
-						disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
-						handleClick={() => setOpenUpselling(true)}
-					/>
+					<View style={{ marginBottom: Platform.OS === 'ios' ? 20 : 0 }}>
+						<FloatingButton
+							btnText={
+								openUpselling
+									? t('LOADING', 'Loading')
+									: subtotalWithTaxes >= currentCart?.minimum
+										? t('VIEW_ORDER', 'View Order')
+										: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+							}
+							isSecondaryBtn={subtotalWithTaxes < currentCart?.minimum || openUpselling}
+							btnLeftValueShow={subtotalWithTaxes >= currentCart?.minimum && currentCart?.products?.length > 0}
+							btnRightValueShow={subtotalWithTaxes >= currentCart?.minimum && currentCart?.products?.length > 0}
+							btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
+							btnRightValue={parsePrice(currentCart?.total)}
+							disabled={subtotalWithTaxes < currentCart?.minimum || openUpselling}
+							handleClick={() => setOpenUpselling(true)}
+						/>
+					</View>
 				)}
 				{openUpselling && (
 					<UpsellingRedirect
@@ -489,7 +585,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onAccept={() => setAlertState({ open: false, content: [] })}
 					onClose={() => setAlertState({ open: false, content: [] })}
 				/>
-			</ContainerSafeAreaView>
+			</View>
 			<OModal
 				open={openService}
 				onClose={() => setOpenService(false)}
@@ -503,6 +599,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					professionalList={business?.professionals}
 					professionalSelected={professionalSelected}
 					handleChangeProfessional={handleChangeProfessionalSelected}
+					handleUpdateProfessionals={handleUpdateProfessionals}
 					onSave={() => setOpenService(false)}
 					onClose={() => setOpenService(false)}
 				/>
@@ -514,6 +611,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
 	const businessProductslistingProps = {
 		...props,
+		isForceSearch: Platform.OS === 'ios',
 		UIComponent: BusinessProductsListingUI
 	}
 	return (