ordering-ui-react-native 0.18.3 → 0.18.4-release

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

@@ -1,12 +1,7 @@
 import styled, { css } from 'styled-components/native'
 
 export const BContainer = styled.View`
-  padding: 20px 40px;
-`
-
-export const WrapHeader = styled.View`
-  width: 100%;
-	padding-vertical: 20px;
+  padding: 20px;
 `
 
 export const SearchWrapper = styled.View`
@@ -53,12 +48,6 @@ export const SingleBusinessContainer = styled.View`
   justify-content: space-between;
 `
 
-export const LoadMoreBusinessContainer = styled.View`
-  align-items: center;
-  justify-content: center;
-  margin-left: 20px;
-`
-
 export const TagsContainer = styled.View`
   padding-bottom: 10px;
 `
@@ -80,13 +69,6 @@ export const PriceFilterWrapper = styled.View`
   margin-bottom: 20px;
 `
 
-export const OptionTitle = styled.View`
-	margin-top: 24px;
-	${(props: any) => props.titleContent && css`
-		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
-	`}
-`
-
 export const WrapperButtons = styled.View`
   flex-direction: row;
   width: 100%;

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useFocusEffect } from '@react-navigation/native'
 import { TouchableOpacity, StyleSheet, View, Dimensions, Platform } from 'react-native'
 import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
 import { OButton, OIcon, OText } from '../shared'
@@ -55,7 +56,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
   const { top } = useSafeAreaInsets()
-  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+  const is12hours = configs?.general_hour_format?.value?.includes('hh:mm')
 
   const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
@@ -63,7 +64,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     container: {
       height: windowHeight,
       paddingVertical: 30,
-      paddingHorizontal: 40
+      paddingHorizontal: 20
     },
     businessLogo: {
       backgroundColor: 'white',
@@ -170,7 +171,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         if (date.getDate() !== dateSeleted.getDate() || i >= date.getHours()) {
           let hour = ''
           let meridian = ''
-          if (configs?.format_time?.value === '12') {
+          if (is12hours) {
             if (i === 0) {
               hour = '12'
               meridian = ' ' + t('AM', 'AM')
@@ -310,17 +311,18 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     }
   }, [dateSelected])
 
-  useEffect(() => {
-    handleAsap && handleAsap()
-  }, [])
+  useFocusEffect(
+    React.useCallback(() => {
+      handleAsap && handleAsap()
+    }, [])
+  )
 
   return (
     <>
-      <PreOrderContainer contentContainerStyle={{ paddingVertical: 32, paddingHorizontal: 40 }}>
+      <PreOrderContainer contentContainerStyle={{ paddingVertical: 32, paddingHorizontal: 20 }}>
         <TouchableOpacity onPress={() => goToBack && goToBack()} style={{ marginBottom: 12 }}>
           <IconAntDesign
             name='close'
-            color={theme.colors.textThird}
             size={24}
             style={{ marginLeft: -4 }}
           />
@@ -557,7 +559,7 @@ export const BusinessPreorder = (props: any) => {
     : null
 
 const splitCateringValue = (configName : string) =>
-  Object.values(a || props?.business?.configs || {})
+  Object.values(props?.business?.configs || {})
     ?.find(config => config?.key === configName)
     ?.value?.split('|')
     ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]

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

@@ -92,7 +92,7 @@ const BusinessProductsCategoriesUI = (props: any) => {
 			ref={tabsRef}
 			horizontal
 			style={{ ...styles.container, borderBottomWidth: loading ? 0 : 1 }}
-			contentContainerStyle={{ paddingHorizontal: 40 }}
+			contentContainerStyle={{ paddingHorizontal: 20 }}
 			showsHorizontalScrollIndicator={false}
 			onScroll={(e: any) => setScrollOffsetX(e.nativeEvent.contentOffset.x)}
 			scrollEventThrottle={16}
@@ -107,8 +107,7 @@ const BusinessProductsCategoriesUI = (props: any) => {
 				</Placeholder>
 			)}
 			{!loading &&
-				categories &&
-				categories.length &&
+				categories?.length > 0 &&
 				categories.map((category: any) => (
 					<Tab
 						key={category.id}

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

@@ -9,7 +9,7 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { shape } from '../../utils'
+import { lightenDarkenColor, shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
 import { OrderItAgain } from '../OrderItAgain'
 import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
@@ -39,7 +39,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleUpdateProducts,
     previouslyProducts,
     isFiltMode,
-    navigation
+    navigation,
+    businessSingleId
   } = props;
 
   const [, t] = useLanguage();
@@ -92,6 +93,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           handleUpdateProducts={handleUpdateProducts}
           currentCart={currentCart}
           searchValue={searchValue}
+          businessSingleId={businessSingleId}
         />
       )}
       {category.id &&
@@ -104,7 +106,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection={!isFiltMode && categoryState.products?.length < 80}
+              // enableIntersection={!isFiltMode}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -112,6 +114,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
               handleUpdateProducts={handleUpdateProducts}
               navigation={navigation}
+              businessSingleId={businessSingleId}
             />
           ))
       }
@@ -132,13 +135,14 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
+                      // enableIntersection={!isFiltMode}
                       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}
+                      businessSingleId={businessSingleId}
                     />
                   ),
               )}
@@ -182,13 +186,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {category?.ribbon?.enabled && (
                     <RibbonBox
                       bgColor={category?.ribbon?.color}
+                      colorText={lightenDarkenColor(category?.ribbon?.color)}
+                      borderRibbon={lightenDarkenColor(category?.ribbon?.color)}
                       isRoundRect={category?.ribbon?.shape === shape?.rectangleRound}
                       isCapsule={category?.ribbon?.shape === shape?.capsuleShape}
                     >
                       <OText
                         size={10}
                         weight={'400'}
-                        color={theme.colors.white}
+                        color={lightenDarkenColor(category?.ribbon?.color) ? theme.colors.black : theme.colors.white}
                         numberOfLines={2}
                         ellipsizeMode='tail'
                         lineHeight={13}
@@ -231,7 +237,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={!isFiltMode && categoryState.products?.length < 80}
+                      enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
@@ -240,6 +246,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       handleUpdateProducts={handleUpdateProducts}
                       navigation={navigation}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                      businessSingleId={businessSingleId}
                     />
                   ))}
                 </>
@@ -302,10 +309,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   ? t('SEARCH_REDIRECT', 'Go to Businesses')
                   : t('CLEAR_FILTERS', 'Clear filters')
               }
-              onClickButton={() =>
+              onClickButton={!businessSingleId ? () =>
                 !searchValue
                   ? handleSearchRedirect && handleSearchRedirect()
                   : handleCancelSearch && handleCancelSearch()
+                : null
               }
             />
           </WrapperNotFound>

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

@@ -18,18 +18,23 @@ 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;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SubCategoriesContainer = styled.View`

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

@@ -13,7 +13,7 @@ const UpsellingRedirectUI = (props: any) => {
     if (!upsellingProducts.loading) {
       if (upsellingProducts?.products?.length) {
         onRedirect &&
-          onRedirect('UpsellingPage', props)
+          onRedirect('UpsellingPage', {...props, products: upsellingProducts?.products })
       } else {
         handleUpsellingPage && handleUpsellingPage()
       }

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, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -11,7 +11,8 @@ import {
   useUtils,
   ToastType,
   useToast,
-  useConfig
+  useConfig,
+  useEvent
 } from 'ordering-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OModal, OText } from '../shared'
@@ -24,6 +25,8 @@ 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 AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
   TopHeader,
@@ -42,6 +45,7 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
+import { NavBack } from 'ordering-ui-react-native/src/components/OrderDetails/styles';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -68,7 +72,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     professionalSelected,
     handleUpdateProfessionals,
     handleChangeProfessionalSelected,
-    onBusinessClick
+    onBusinessClick,
+    businessSingleId,
+    productModal
   } = props
 
   const insets = useSafeAreaInsets()
@@ -79,6 +85,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [{ parsePrice }] = useUtils()
   const [, { showToast }] = useToast()
   const [{ configs }] = useConfig()
+  const [events] = useEvent()
   const isFocused = useIsFocused();
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
@@ -107,7 +114,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     },
     searchIcon: {
       borderWidth: 0,
-      padding: 15,
+      padding: 10,
       justifyContent: 'center',
       shadowColor: theme.colors.clear,
     },
@@ -132,31 +139,44 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [openService, setOpenService] = useState(false)
   const [currentProduct, setCurrentProduct] = useState(null)
   const [searchBarHeight, setSearchBarHeight] = useState(60)
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [viewedCategory, setViewedCategory] = useState<any>(null)
+  const [showTitle, setShowTitle] = useState(false)
 
   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' ? 165 : 100
+  const filtProductsHeight = Platform.OS === 'ios' ? 65 : 30
+  const viewOrderButtonVisible = !loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0
+
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
+  const vibrateApp = (impact?: string) => {
+    const options = {
+      enableVibrateFallback: true,
+      ignoreAndroidSystemSettings: false
+    };
+    ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+  }
   const onProductClick = async (product: any) => {
-    if (product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
+    if (product.ingredients?.length === 0 && product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
       const isProductAddedToCart = currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)
       const productQuantity = isProductAddedToCart?.quantity
+      const minimumPerOrder = product?.minimum_per_order || 1
       const addCurrentProduct = {
         ...product,
-        quantity: 1
+        quantity: minimumPerOrder
       }
       const updateCurrentProduct = {
+        name: product?.name,
         id: product.id,
         code: isProductAddedToCart?.code,
         quantity: productQuantity + 1
       }
-      Vibration.vibrate()
+      vibrateApp()
       const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
       if (isProductAddedToCart) {
         await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)
@@ -173,10 +193,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       onRedirect('ProductDetails', {
         product: product,
         businessSlug: business.slug,
-        businessId: business.id,
-        productAddedToCartLength
+        businessId: business.id || product?.category?.business_id,
+        productAddedToCartLength,
+        isRedirect: false
       })
     }
+    events.emit('product_clicked', product)
   }
 
   const handleCancel = () => {
@@ -184,18 +206,23 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     handleChangeSearch('')
   }
 
-  const handleUpsellingPage = () => {
+  const handleUpsellingPage = (cart: any) => {
+    const isProductCartParam = !!cart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
-    if (cartsAvailable.length === 1) {
+    const cartsAvailable: any = Object.values(orderState?.carts)
+      ?.filter((_cart: any) => _cart?.valid && _cart?.status !== 2 && _cart?.products?.length)
+      ?.filter((_c: any) => !isProductCartParam ? _c.uuid !== cart?.uuid : _c)
+    if (cartsAvailable.length === 1 || !isCheckoutMultiBusinessEnabled) {
+      const cart = isCheckoutMultiBusinessEnabled ? cartsAvailable[0] : currentCart
+
       props.onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
-        cartUuid: cartsAvailable[0]?.uuid,
-        businessLogo: cartsAvailable[0]?.business?.logo,
-        businessName: cartsAvailable[0]?.business?.name,
-        cartTotal: cartsAvailable[0]?.total
-      })
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
+      }, true)
     } else {
       const groupKeys: any = {}
       cartsAvailable.forEach((_cart: any) => {
@@ -211,12 +238,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         props.onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           checkCarts: true
-        })
+        }, true)
       } else {
         props.onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           cartUuid: cartsAvailable[0]?.group?.uuid
-        })
+        }, true)
       }
     }
   }
@@ -229,6 +256,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const handlePageScroll = useCallback(({ nativeEvent }: any) => {
     const scrollOffset = nativeEvent.contentOffset.y
+    setShowTitle(scrollOffset > 30)
+
     if (businessState?.business?.lazy_load_products_recommended) {
       const height = nativeEvent.contentSize.height
       const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
@@ -259,7 +288,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   }, []);
 
   const handleBackNavigation = () => {
-    navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
+    navigation?.canGoBack() && !props.fromMulti ? navigation.goBack() : navigation.navigate('BottomTab')
   }
 
   const adjustBusiness = async (adjustBusinessId: number) => {
@@ -297,12 +326,84 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [isFocused])
 
+
+  useEffect(() => {
+    function onKeyboardDidShow(e: KeyboardEvent) {
+      setKeyboardHeight(e?.endCoordinates?.height);
+    }
+
+    function onKeyboardDidHide() {
+      setKeyboardHeight(0);
+    }
+
+    const showSubscription = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
   const subtotalWithTaxes = currentCart?.taxes?.reduce((acc: any, item: any) => {
     if (item?.type === 1)
       return acc = acc + item?.summary?.tax
     return acc = acc
   }, currentCart?.subtotal)
 
+  const onChangeSearch = (query: any) => {
+    handleChangeSearch(query)
+    if (query) {
+      events.emit('products_searched', query)
+    }
+  }
+
+  useEffect(() => {
+    let categoryId: any = null
+    if (business?.lazy_load_products_recommended) {
+      if (categorySelected?.id) {
+        categoryId = categorySelected.id
+      }
+    } else {
+      if (selectedCategoryId) {
+        const originCategoryId = selectedCategoryId.replace('cat_', '')
+        if (!isNaN(originCategoryId)) {
+          categoryId = Number(originCategoryId)
+        }
+      }
+    }
+    if (categoryId) {
+      const _viewedCategory = business.categories.find(category => category.id === categoryId)
+      if (_viewedCategory?.id !== viewedCategory?.id) {
+        setViewedCategory(_viewedCategory)
+        events.emit('product_list_viewed', _viewedCategory)
+      }
+    }
+  }, [business?.lazy_load_products_recommended, selectedCategoryId, categorySelected?.id, viewedCategory])
+
+  useEffect(() => {
+    const handleArrowBack: any = () => {
+      navigation.goBack()
+      return true
+    }
+    BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!business && !loading && !error) {
+      showToast(ToastType.Error, t('BUSINESS_NOT_FOUND', 'Business not found'))
+      navigation.navigate('BusinessList')
+    }
+  }, [business, error, loading])
+
+  useEffect(() => {
+    if (productModal?.product && !productModal?.loading && !productModal?.error) {
+      onProductClick(props?.productModal?.product)
+    }
+  }, [productModal])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>
@@ -312,12 +413,29 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               marginTop: Platform.OS === 'ios' ? insets.top : 0
             }}
             onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height)}
+            hideArrow={(businessSingleId && auth)}
           >
             {!isOpenSearchBar && (
               <>
-                <TopActions onPress={() => handleBackNavigation()}>
-                  <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-                </TopActions>
+                {!(businessSingleId && auth) && (
+                  <TopActions onPress={() => handleBackNavigation()}>
+                    <AntDesignIcon
+                      name='arrowleft'
+                      size={26}
+                    />
+                  </TopActions>
+                )}
+                {showTitle && (
+                  <OText
+                    size={16}
+                    style={{ flex: 1, textAlign: 'center' }}
+                    weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                    numberOfLines={2}
+                    ellipsizeMode='tail'
+                  >
+                    {business?.name}
+                  </OText>
+                )}
                 {!errorQuantityProducts && (
                   <View style={{ ...styles.headerItem }}>
                     <TouchableOpacity
@@ -334,12 +452,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               <WrapSearchBar>
                 <SearchBar
                   autoFocus
-                  onSearch={handleChangeSearch}
+                  onSearch={onChangeSearch}
                   onCancel={() => handleCancel()}
                   isCancelXButtonShow
                   noBorderShow
                   placeholder={t('SEARCH_PRODUCTS', 'Search Products')}
-                  lazyLoad={businessState?.business?.lazy_load_products_recommended}
+                  lazyLoad
                 />
               </WrapSearchBar>
             )}
@@ -373,8 +491,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {business?.categories?.length > 0 && isOpenFiltProducts && (
           <FiltProductsContainer
             style={{
-              height: Dimensions.get('window').height - filtProductsHeight,
-              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight
+              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 55 : 0),
+              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight,
             }}
             contentContainerStyle={{ flexGrow: 1 }}
           >
@@ -407,15 +525,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 previouslyProducts={business?.previously_products}
                 navigation={navigation}
                 isFiltMode
+                businessSingleId={businessSingleId}
               />
             </View>
           </FiltProductsContainer>
         )}
-        {isOpenFiltProducts && (
-          <BackgroundGray isIos={Platform.OS === 'ios'} />
-        )}
         <IOScrollView
-          stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
+          stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
             ...styles.mainContainer,
             marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
@@ -452,7 +568,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               />
             </ProfessionalFilterWrapper>
           )}
-          <PageBanner position='app_business_page' navigation={navigation} />
+          {businessState?.business?.id && (
+            <PageBanner position='app_business_page' businessId={businessState?.business?.id} navigation={navigation} />
+          )}
           <View
             style={{
               height: 8,
@@ -480,7 +598,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             <>
               <WrapContent
                 onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
-                style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+                style={{ paddingHorizontal: 20 }}
               >
                 <BusinessProductsList
                   categories={[
@@ -509,6 +627,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                   handleUpdateProducts={handleUpdateProducts}
                   navigation={navigation}
                   previouslyProducts={business?.previously_products}
+                  businessSingleId={businessSingleId}
                 />
               </WrapContent>
             </>
@@ -536,8 +655,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               </WrapContent>
             </>
           )}
+          {isOpenFiltProducts && (
+            <BackgroundGray isIos={Platform.OS === 'ios'} />
+          )}
         </IOScrollView>
-        {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
+        {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
             <FloatingButton
               btnText={
@@ -588,12 +710,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         <ServiceForm
           navigation={navigation}
           product={currentProduct}
-          businessSlug={business.slug}
-          businessId={business.id}
+          businessSlug={business?.slug}
+          businessId={business?.id}
           professionalList={business?.professionals}
           professionalSelected={professionalSelected}
           handleChangeProfessional={handleChangeProfessionalSelected}
-          handleChangeProfessional={handleChangeProfessionalSelected}
           handleUpdateProfessionals={handleUpdateProfessionals}
           onSave={() => setOpenService(false)}
           onClose={() => setOpenService(false)}
@@ -607,6 +728,8 @@ export const BusinessProductsListing = (props: BusinessProductsListingParams) =>
   const businessProductslistingProps = {
     ...props,
     isForceSearch: Platform.OS === 'ios',
+    isApp: true,
+    isFetchAllProducts: true,
     UIComponent: BusinessProductsListingUI
   }
   return (