ordering-ui-react-native 0.21.49 → 0.21.50-release

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

@@ -1,36 +1,25 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage, BusinessSearchList, useOrder, useUtils, useEvent, showToast, ToastType } from 'ordering-components/native'
-import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ScrollView, StyleSheet, Dimensions, FlatList } from 'react-native'
 import { useTheme } from 'styled-components/native'
-import { HeaderTitle, OButton, OModal, OText } from '../shared'
-import { SearchBar } from '../SearchBar';
-import { NotFoundSource } from '../NotFoundSource'
+import { OButton, OText } from '../shared'
+
 import { SingleProductCard } from '../SingleProductCard'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import {
-  SearchWrapper,
-  ProductsList,
   SingleBusinessSearch,
   BusinessInfo,
   BusinessInfoItem,
   Metadata,
   SingleBusinessContainer,
-  TagsContainer,
-  SortContainer,
-  BrandContainer,
-  BrandItem,
-  PriceFilterWrapper,
   BContainer,
-  WrapperButtons
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
 import { useIsFocused } from '@react-navigation/native';
-import { MaxSectionItem } from './MaxSectionItem'
-import { IOScrollView } from 'react-native-intersection-observer'
+
+import { BusinessSearchHeader } from './BusinessSearchHeader'
+import { BusinessSearchFooter } from './BusinessSearchFooter'
 
 const PIXELS_TO_SCROLL = 1000
 
@@ -51,94 +40,20 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleUpdateProducts
   } = props
 
-  const screenHeight = Dimensions.get('window').height;
   const screenWidth = Dimensions.get('window').width;
   const theme = useTheme()
   const [orderState] = useOrder()
   const [events] = useEvent()
-  const { top } = useSafeAreaInsets();
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 
   const [openFilters, setOpenFilters] = useState(false)
-  const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
-  const maxDeliveryFeeOptions = [15, 25, 35, 'default']
-  // const maxProductPriceOptions = [5, 10, 15, 'default']
-  const maxDistanceOptions = [1000, 2000, 5000, 'default']
-  const maxTimeOptions = [5, 15, 30, 'default']
-  const sortItems = [
-    { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'distance' },
-    { text: t('DELIVERY_TIME', 'Delivery time'), value: 'delivery_time' },
-    { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
-  ]
-
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
-
-  const priceList = [
-    { level: '1', content: '$' },
-    { level: '2', content: '$$' },
-    { level: '3', content: '$$$' },
-    { level: '4', content: '$$$$' },
-    { level: '5', content: '$$$$$' }
-  ]
 
   const isFocused = useIsFocused();
 
   const styles = StyleSheet.create({
-    container: {
-      paddingHorizontal: 40,
-      width: '100%'
-    },
-    filterContainer: {
-      maxHeight: screenHeight - 150,
-      paddingHorizontal: 40,
-      width: '100%'
-    },
-    searchInput: {
-      fontSize: 12,
-      height: 44
-    },
     productsContainer: {
       marginTop: 20
-    },
-    businessTypesContainer: {
-      width: '100%',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'center'
-    },
-    priceContainer: {
-      width: '100%',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between'
-    },
-    categoryStyle: {
-      marginRight: 10,
-      marginTop: 10,
-      borderRadius: 50,
-      paddingHorizontal: 10,
-      paddingVertical: 4,
-      paddingLeft: 0,
-      paddingRight: 0,
-      height: 28,
-      borderWidth: 0
-    },
-    priceItem: {
-      marginRight: 10,
-      marginTop: 10,
-      borderRadius: 50,
-      paddingVertical: 4,
-      paddingLeft: 5,
-      paddingRight: 5,
-      height: 27,
-      borderWidth: 0
-    },
-    applyButton: {
-      paddingHorizontal: 10,
-      width: '100%',
-      marginTop: 20
     }
   });
 
@@ -250,71 +165,37 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }, [isFocused])
 
   return (
-    <IOScrollView
-      onScroll={(e: any) => handleScroll(e)}
-      showsVerticalScrollIndicator={false}
-    >
-      <View style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: hideBrowse && !isChewLayout ? 40 : 20,
-      }}>
-        {hideBrowse && !isChewLayout && (
-          <OButton
-            imgLeftStyle={{ width: 18 }}
-            imgRightSrc={null}
-            style={{
-              borderWidth: 0,
-              width: 26,
-              height: 26,
-              backgroundColor: '#FFF',
-              borderColor: '#FFF',
-              shadowColor: '#FFF',
-              paddingLeft: 0,
-              paddingRight: 0,
-              marginTop: 50,
-            }}
-            onClick={() => props.navigation.goBack()}
-            icon={AntDesignIcon}
-            iconProps={{
-              name: 'arrowleft',
-              size: 26
-            }}
-          />
-        )}
-        <HeaderTitle ph={20} text={t('SEARCH', 'Search')} />
-        <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
-      </View>
-      <BContainer
-        style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
-      >
-        <SearchWrapper>
-          <SearchBar
-            lazyLoad
-            {...(isChewLayout && { height: 55 })}
-            inputStyle={{ ...styles.searchInput }}
-            placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
-            onSearch={(val: string) => onChangeTermValue(val)}
-            value={termValue}
-          />
-        </SearchWrapper>
-        <OText size={12} lineHeight={20} color={theme.colors.textThird} mLeft={5}>
-          {t('TYPE_AT_LEAST_2_CHARACTERS', 'Type at least 2 characters')}
-        </OText>
-        {
-          noResults && (
-            <View>
-              <NotFoundSource
-                content={t('NOT_FOUND_BUSINESSES', 'No businesses to delivery / pick up at this address, please change filters or change address.')}
-              />
-            </View>
-          )
-        }
-        <ProductsList>
-          {businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0).map((business: any) => (
-            <SingleBusinessSearch key={`card-${business?.id}`}>
+    <>
+      <FlatList
+        data={businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0)}
+        ListFooterComponent={<BusinessSearchFooter
+          businessesSearchList={businessesSearchList}
+          handleCloseFilters={handleCloseFilters}
+          handleChangeFilters={handleChangeFilters}
+          brandList={brandList}
+          filters={filters}
+          handleChangeBrandFilter={handleChangeBrandFilter}
+          handleChangePriceRange={handleChangePriceRange}
+          businessTypes={businessTypes}
+          handleApplyFilters={handleApplyFilters}
+          clearFilters={clearFilters}
+          handleChangeActiveBusinessType={handleChangeActiveBusinessType}
+          openFilters={openFilters}
+        />}
+        ListHeaderComponent={<BusinessSearchHeader
+          businessesSearchList={businessesSearchList}
+          onChangeTermValue={onChangeTermValue}
+          termValue={termValue}
+          handleOpenfilters={handleOpenfilters}
+        />}
+        onScroll={(e: any) => handleScroll(e)}
+        showsVerticalScrollIndicator={false}
+        keyExtractor={(business: any, index: number) => `card-${business?.id}-${index}`}
+        renderItem={({ item: business }: any) => (
+          <BContainer
+            style={{ paddingHorizontal: 20, paddingTop: 0, paddingBottom: 0 }}
+          >
+            <SingleBusinessSearch>
               <SingleBusinessContainer>
                 <BusinessInfo>
                   {(business?.logo || theme.images?.dummies?.businessLogo) && (
@@ -380,210 +261,18 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                     }}
                   />
                 )))}
-
               </ScrollView>
             </SingleBusinessSearch>
-          ))}
-          {businessesSearchList?.loading && (
-            <>
-              {[...Array(3).keys()].map(
-                (item, i) => (
-                  <View key={`skeleton:${i}`} style={{ width: '100%', marginTop: 20 }}>
-                    <Placeholder key={i} style={{ paddingHorizontal: 5 }} Animation={Fade}>
-                      <View style={{ flexDirection: 'row' }}>
-                        <PlaceholderLine
-                          width={24}
-                          height={70}
-                          style={{ marginRight: 10, marginBottom: 10 }}
-                        />
-                        <Placeholder style={{ paddingVertical: 10 }}>
-                          <PlaceholderLine width={20} style={{ marginBottom: 25 }} />
-                          <PlaceholderLine width={60} />
-                        </Placeholder>
-                      </View>
-                    </Placeholder>
-                    <Placeholder style={{ paddingHorizontal: 5, bottom: 10 }} Animation={Fade}>
-                      <View style={{ flexDirection: 'row-reverse', overflow: 'hidden' }}>
-                        <PlaceholderLine
-                          width={24}
-                          height={70}
-                          style={{ marginRight: 10, marginBottom: 5 }}
-                        />
-                        <Placeholder style={{ paddingVertical: 10 }}>
-                          <PlaceholderLine width={60} height={10} />
-                          <PlaceholderLine width={50} height={10} />
-                          <PlaceholderLine width={70} height={10} />
-                        </Placeholder>
-                      </View>
-                    </Placeholder>
-                  </View>
-                ),
-              )}
-            </>
-          )}
-        </ProductsList>
-        <OModal
-          open={openFilters}
-          onCancel={() => handleCloseFilters()}
-          onClose={() => handleCloseFilters()}
-        >
-          <ScrollView style={styles.filterContainer}>
-            <OText
-              size={20}
-              mBottom={15}
-              style={{ marginTop: 10 }}
-            >
-              {t('FILTER', 'Filter')}
-            </OText>
-            <SortContainer>
-              <OText weight='bold' mBottom={7} size={16}>
-                {t('SORT', 'Sort')}
-              </OText>
-              {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
-                <TouchableOpacity
-                  key={item?.value}
-                  onPress={() => handleChangeFilters('orderBy', item?.value)}
-                  style={{ marginBottom: 7 }}
-                >
-                  <OText
-                    weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
-                    mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
-                  >
-                    {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
-                  </OText>
-                </TouchableOpacity>
-              ))}
-            </SortContainer>
-            <BrandContainer>
-              <OText
-                size={16}
-                weight='bold'
-                lineHeight={24}
-                style={{ marginBottom: 10 }}
-              >
-                {t('BRANDS', 'Brands')}
-              </OText>
-              {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
-                <ScrollView
-                  style={{ maxHeight: 300, marginBottom: 10 }}
-                  showsVerticalScrollIndicator={true}
-                  nestedScrollEnabled={true}
-                >
-                  {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
-                    <BrandItem
-                      key={i}
-                      onPress={() => handleChangeBrandFilter(brand?.id)}
-                    >
-                      <OText
-                        size={14}
-                        weight={'400'}
-                        lineHeight={24}
-                      >
-                        {brand?.name}
-                      </OText>
-                      {filters?.franchise_ids?.includes(brand?.id) && (
-                        <AntDesignIcon
-                          name='check'
-                          color={theme.colors.success500}
-                          size={16}
-                        />
-                      )}
-                    </BrandItem>
-                  ))}
-                </ScrollView>
-              )}
-              {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
-                <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
-              )}
-            </BrandContainer>
-            <PriceFilterWrapper>
-              <OText
-                size={16}
-                weight='bold'
-                lineHeight={24}
-                style={{ marginBottom: 5 }}
-              >
-                {t('PRICE_RANGE', 'Price range')}
-              </OText>
-              <View style={styles.priceContainer}>
-                {priceList.map((price: any, i: number) => (
-                  <OButton
-                    key={i}
-                    bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
-                    onClick={() => handleChangePriceRange(price?.level)}
-                    text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
-                    style={styles.priceItem}
-                    textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.backgroundLight : theme.colors.textNormal }}
-                  />
-                ))}
-              </View>
-            </PriceFilterWrapper>
-            {orderState?.options?.type === 1 && (
-              <MaxSectionItem
-                filters={filters}
-                title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
-                options={maxDeliveryFeeOptions}
-                filter='max_delivery_price'
-                handleChangeFilters={handleChangeFilters}
-              />
-            )}
-            {[1, 2].includes(orderState?.options?.type) && (
-              <MaxSectionItem
-                filters={filters}
-                title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
-                options={maxTimeOptions}
-                filter='max_eta'
-                handleChangeFilters={handleChangeFilters}
-              />
-            )}
-            <MaxSectionItem
-              filters={filters}
-              title={t('MAX_DISTANCE', 'Max distance')}
-              options={maxDistanceOptions}
-              filter='max_distance'
-              handleChangeFilters={handleChangeFilters}
-            />
-            {businessTypes?.length > 0 && (
-              <TagsContainer>
-                <OText weight='bold' mBottom={7} size={16}>{t('BUSINESS_CATEGORIES', 'Business categories')}</OText>
-                <View style={styles.businessTypesContainer}>
-                  {businessTypes.map((type: any, i: number) => type.enabled && (
-                    <OButton
-                      key={type?.id}
-                      bgColor={(filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? theme.colors.primary : theme.colors.backgroundGray200}
-                      onClick={() => handleChangeActiveBusinessType(type)}
-                      text={`${t(`BUSINESS_TYPE_${type.name.replace(/\s/g, '_').toUpperCase()}`, type.name)} ${filters?.business_types?.includes(type?.id) ? 'X' : ''}`}
-                      style={styles.categoryStyle}
-                      textStyle={{ fontSize: 10, color: (filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? '#fff' : theme.colors.textNormal }}
-                    />
-                  ))}
-                </View>
-              </TagsContainer>
-            )}
-          </ScrollView>
-          <WrapperButtons>
-            <View style={{ width: '50%' }}>
-              <OButton
-                text={t('APPLY', 'Apply')}
-                parentStyle={styles.applyButton}
-                textStyle={{ color: '#fff' }}
-                onClick={() => handleApplyFilters()}
-              />
-            </View>
-            <View style={{ width: '50%' }}>
-              <OButton
-                text={t('CLEAR_FILTERS', 'Clear')}
-                bgColor={theme.colors.white}
-                borderColor={theme.colors.primary}
-                parentStyle={styles.applyButton}
-                textStyle={{ color: theme.colors.primary }}
-                onClick={() => clearFilters()}
-              />
-            </View>
-          </WrapperButtons>
-        </OModal>
-      </BContainer>
-    </IOScrollView>
+          </BContainer>
+        )}
+      />
+      {/* <IOScrollView
+        onScroll={(e: any) => handleScroll(e)}
+        showsVerticalScrollIndicator={false}
+      >
+
+      </IOScrollView> */}
+    </>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components/native'
 
 export const BContainer = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 
 export const SearchWrapper = styled.View`

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

@@ -64,7 +64,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     container: {
       height: windowHeight,
       paddingVertical: 30,
-      paddingHorizontal: 40
+      paddingHorizontal: 20
     },
     businessLogo: {
       backgroundColor: 'white',
@@ -319,11 +319,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   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 }}
           />
@@ -529,6 +528,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
           textStyle={{ color: 'white' }}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
           style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
           onClick={() => handleClickBusiness()}
           isDisabled={isAsap || !(dateSelected && timeSelected)}

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}

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

@@ -237,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}
+                      // enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

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,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler, ScrollView } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -114,7 +114,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     },
     searchIcon: {
       borderWidth: 0,
-      padding: 15,
+      padding: 10,
       justifyContent: 'center',
       shadowColor: theme.colors.clear,
     },
@@ -148,7 +148,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   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) => {
@@ -190,12 +190,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         setOpenService(true)
         return
       }
-      onRedirect('ProductDetails', {
-        product: product,
-        businessSlug: business.slug,
-        businessId: business.id || product?.category?.business_id,
-        productAddedToCartLength
-      })
+      if (product?.enabled) {
+        onRedirect('ProductDetails', {
+          product: product,
+          businessSlug: business.slug,
+          businessId: business.id || product?.category?.business_id,
+          productAddedToCartLength,
+          isRedirect: false
+        })
+      } else {
+        showToast(ToastType.Error, t('PRODUCT_NOT_FOUND', 'Product not found'))
+      }
     }
     events.emit('product_clicked', product)
   }
@@ -376,6 +381,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         setViewedCategory(_viewedCategory)
         events.emit('product_list_viewed', _viewedCategory)
       }
+    } else {
+      if (business.categories) {
+        const categoryAll: any = {}
+        categoryAll.business_id = business.id
+        categoryAll.id = null
+        categoryAll.name = 'All'
+        events.emit('product_list_viewed', categoryAll)
+      }
     }
   }, [business?.lazy_load_products_recommended, selectedCategoryId, categorySelected?.id, viewedCategory])
 
@@ -490,8 +503,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {business?.categories?.length > 0 && isOpenFiltProducts && (
           <FiltProductsContainer
             style={{
-              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 55 : 0),
-              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight,
+              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 10 : 0),
+              top: Platform.OS === 'ios' ? viewOrderButtonVisible ? (searchBarHeight - 10) + insets.top + 10 : (searchBarHeight - 10) + insets.top : searchBarHeight,
             }}
             contentContainerStyle={{ flexGrow: 1 }}
           >
@@ -529,10 +542,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             </View>
           </FiltProductsContainer>
         )}
-        {isOpenFiltProducts && (
-          <BackgroundGray isIos={Platform.OS === 'ios'} />
-        )}
-        <IOScrollView
+        <ScrollView
           stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
             ...styles.mainContainer,
@@ -600,7 +610,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             <>
               <WrapContent
                 onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
-                style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+                style={{ paddingHorizontal: 20 }}
               >
                 <BusinessProductsList
                   categories={[
@@ -657,7 +667,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               </WrapContent>
             </>
           )}
-        </IOScrollView>
+          {isOpenFiltProducts && (
+            <BackgroundGray isIos={Platform.OS === 'ios'} />
+          )}
+        </ScrollView>
         {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
             <FloatingButton
@@ -714,7 +727,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           professionalList={business?.professionals}
           professionalSelected={professionalSelected}
           handleChangeProfessional={handleChangeProfessionalSelected}
-          handleChangeProfessional={handleChangeProfessionalSelected}
           handleUpdateProfessionals={handleUpdateProfessionals}
           onSave={() => setOpenService(false)}
           onClose={() => setOpenService(false)}

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

@@ -50,7 +50,7 @@ export const BackgroundGray = styled.View`
 `
 
 export const ProfessionalFilterWrapper = styled.View`
-  padding-left: 40px;
+  padding-left: 20px;
   margin-bottom: 35px;
 `
 
@@ -63,6 +63,6 @@ export const NearBusiness = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
-  padding-horizontal: 30px;
+  padding-horizontal: 20px;
   width: 100px;
 `;