ordering-ui-react-native 0.18.38 → 0.18.40

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

@@ -3,7 +3,7 @@ import { useLanguage, BusinessSearchList, useOrder, useUtils, showToast, ToastTy
 import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
-import { OButton, OModal, OText } from '../shared'
+import { HeaderTitle, OButton, OModal, OText } from '../shared'
 import { SearchBar } from '../SearchBar';
 import { NotFoundSource } from '../NotFoundSource'
 import { SingleProductCard } from '../SingleProductCard'
@@ -30,6 +30,10 @@ 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'
+
+const PIXELS_TO_SCROLL = 1000
+
 export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   const {
     navigation,
@@ -67,6 +71,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   ]
 
   const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
 
   const priceList = [
     { level: '1', content: '$' },
@@ -90,6 +95,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     },
     searchInput: {
       fontSize: 12,
+      height: 44
     },
     productsContainer: {
       marginTop: 20
@@ -207,6 +213,18 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     })
   }
 
+  const handleScroll = ({ nativeEvent }: any) => {
+    const y = nativeEvent.contentOffset.y;
+    const height = nativeEvent.contentSize.height;
+    const hasMore = !(
+      paginationProps.totalPages === paginationProps.currentPage
+    );
+
+    if (y + PIXELS_TO_SCROLL > height && !businessesSearchList.loading && hasMore && businessesSearchList?.businesses?.length > 0) {
+      handleSearchbusinessAndProducts();
+    }
+  };
+
   useEffect(() => {
     if (filters.business_types?.length === 0 && filters.orderBy === 'default' && Object.keys(filters)?.length === 2 && !openFilters) {
       handleSearchbusinessAndProducts(true)
@@ -223,297 +241,334 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }, [isFocused])
 
   return (
-    <BContainer
-      style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+    <IOScrollView
+      onScroll={(e: any) => handleScroll(e)}
+      showsVerticalScrollIndicator={false}
     >
-      <SearchWrapper>
-        <SearchBar
-          lazyLoad
-          {...(isChewLayout && { height: 55 })}
-          inputStyle={{ ...styles.searchInput }}
-          placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
-          onSearch={(val: string) => handleChangeTermValue(val)}
-          value={termValue}
-          iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
-        />
-      </SearchWrapper>
-      <OText size={12} lineHeight={20} color={theme.colors.textThird} mLeft={5}>
-        {t('TYPE_AT_LEAST_3_CHARACTERS', 'Type at least 3 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}`}>
-            <SingleBusinessContainer>
-              <BusinessInfo>
-                {(business?.logo || theme.images?.dummies?.businessLogo) && (
-                  <FastImage
-                    style={{ height: 48, width: 48 }}
-                    source={{
-                      uri: optimizeImage(business?.logo, 'h_120,c_limit'),
-                      priority: FastImage.priority.normal,
-                    }}
-                    resizeMode={FastImage.resizeMode.cover}
-                  />
-                )}
-              </BusinessInfo>
-              <BusinessInfoItem>
-                <OText size={12}>{business?.name}</OText>
-                <Metadata>
-                  {orderState?.options?.type === 1 && (
-                    <>
-                      <OText size={10}>{t('DELIVERY_FEE', 'Delivery fee')}{' '}</OText>
-                      <OText size={10} mRight={3}>
-                        {business && parsePrice(business?.delivery_price)}
-                      </OText>
-                    </>
-                  )}
-                  <OText size={10} mRight={3}>
-                    {convertHoursToMinutes(orderState?.options?.type === 1 ? business?.delivery_time : business?.pickup_time)}
-                  </OText>
-                  <OText size={10}>
-                    {parseDistance(business?.distance)}
-                  </OText>
-                </Metadata>
-              </BusinessInfoItem>
-              <OButton
-                onClick={() => onBusinessClick(business)}
-                textStyle={{ color: theme.colors.primary, fontSize: 10 }}
-                text={t('GO_TO_STORE', 'Go to store')}
-                bgColor='#F5F9FF'
-                borderColor='#fff'
-                style={{ borderRadius: 50, paddingLeft: 5, paddingRight: 5, height: 20 }}
+      <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) => handleChangeTermValue(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.')}
               />
-            </SingleBusinessContainer>
-            <ScrollView horizontal style={styles.productsContainer} contentContainerStyle={{ flexGrow: 1 }}>
-              {business?.categories?.map((category: any) => category?.products?.map((product: any, i: number) => (
-                <SingleProductCard
-                  key={product?.id}
-                  isSoldOut={(product.inventoried && !product.quantity)}
-                  product={product}
-                  enableIntersection={false}
-                  businessId={business?.id}
-                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id, product)}
-                  productAddedToCartLength={0}
-                  handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
-                  style={{
-                    width: screenWidth - (category?.products?.length > 1 ? 120 : 80),
-                    maxWidth: screenWidth - (category?.products?.length > 1 ? 120 : 80),
-                    marginRight: 20
-                  }}
+            </View>
+          )
+        }
+        <ProductsList>
+          {businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0).map((business: any) => (
+            <SingleBusinessSearch key={`card-${business?.id}`}>
+              <SingleBusinessContainer>
+                <BusinessInfo>
+                  {(business?.logo || theme.images?.dummies?.businessLogo) && (
+                    <FastImage
+                      style={{ height: 48, width: 48 }}
+                      source={{
+                        uri: optimizeImage(business?.logo, 'h_120,c_limit'),
+                        priority: FastImage.priority.normal,
+                      }}
+                      resizeMode={FastImage.resizeMode.cover}
+                    />
+                  )}
+                </BusinessInfo>
+                <BusinessInfoItem>
+                  <OText size={12}>{business?.name}</OText>
+                  <Metadata>
+                    {orderState?.options?.type === 1 && (
+                      <>
+                        <OText size={10}>{t('DELIVERY_FEE', 'Delivery fee')}{' '}</OText>
+                        <OText size={10} mRight={3}>
+                          {business && parsePrice(business?.delivery_price)}
+                        </OText>
+                      </>
+                    )}
+                    <OText size={10} mRight={3}>
+                      {convertHoursToMinutes(orderState?.options?.type === 1 ? business?.delivery_time : business?.pickup_time)}
+                    </OText>
+                    <OText size={10}>
+                      {parseDistance(business?.distance)}
+                    </OText>
+                  </Metadata>
+                </BusinessInfoItem>
+                <OButton
+                  onClick={() => onBusinessClick(business)}
+                  textStyle={{ color: theme.colors.primary, fontSize: 10 }}
+                  text={t('GO_TO_STORE', 'Go to store')}
+                  bgColor='#F5F9FF'
+                  borderColor='#fff'
+                  style={{ borderRadius: 50, paddingLeft: 5, paddingRight: 5, height: 20 }}
                 />
-              )))}
+              </SingleBusinessContainer>
+              <ScrollView horizontal style={styles.productsContainer} contentContainerStyle={{ flexGrow: 1 }}>
+                {business?.categories?.map((category: any) => category?.products?.map((product: any, i: number) => (
+                  <SingleProductCard
+                    key={product?.id}
+                    isSoldOut={(product.inventoried && !product.quantity)}
+                    product={product}
+                    enableIntersection={false}
+                    businessId={business?.id}
+                    onProductClick={(product: any) => onProductClick(business, category?.id, product?.id, product)}
+                    productAddedToCartLength={0}
+                    handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
+                    style={{
+                      width: screenWidth - (category?.products?.length > 1 ? 120 : 80),
+                      maxWidth: screenWidth - (category?.products?.length > 1 ? 120 : 80),
+                      marginRight: 20
+                    }}
+                  />
+                )))}
 
-            </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>
+              </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={16}
-              weight='bold'
-              lineHeight={24}
-              style={{ marginBottom: 10 }}
+              size={20}
+              mBottom={15}
+              style={{ marginTop: 10 }}
             >
-              {t('BRANDS', 'Brands')}
+              {t('FILTER', 'Filter')}
             </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)}
+            <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}
                   >
-                    <OText
-                      size={14}
-                      weight={'400'}
-                      lineHeight={24}
+                    {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)}
                     >
-                      {brand?.name}
-                    </OText>
-                    {filters?.franchise_ids?.includes(brand?.id) && (
-                      <AntDesignIcon
-                        name='check'
-                        color={theme.colors.success500}
-                        size={16}
-                      />
-                    )}
-                  </BrandItem>
+                      <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 }}
+                  />
                 ))}
-              </ScrollView>
+              </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}
+              />
             )}
-            {!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>
+            {[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}
+              />
             )}
-          </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'
+              title={t('MAX_DISTANCE', 'Max distance')}
+              options={maxDistanceOptions}
+              filter='max_distance'
               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>
+            {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>
   )
 }