ordering-ui-react-native 0.16.27 → 0.16.28-release

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, BusinessSearchList, useOrder, useUtils } from 'ordering-components/native'
+import { useLanguage, BusinessSearchList, useOrder, useUtils, showToast, ToastType } from 'ordering-components/native'
 import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
-import { OButton, OIcon, OModal, OText } from '../shared'
+import { OButton, OModal, OText } from '../shared'
 import { SearchBar } from '../SearchBar';
 import { BusinessController } from '../BusinessController'
 import { NotFoundSource } from '../NotFoundSource'
@@ -19,22 +19,23 @@ import {
   Metadata,
   SingleBusinessContainer,
   LoadMoreBusinessContainer,
-  ProgressContentWrapper,
-  ProgressBar,
   TagsContainer,
   SortContainer,
   BrandContainer,
   BrandItem,
   PriceFilterWrapper,
-  OptionTitle
+  OptionTitle,
+  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 { MyOrders } from '../MyOrders'
-
-
+import { useIsFocused } from '@react-navigation/native';
+import { MaxSectionItem } from './MaxSectionItem'
+import { BusinessControllerSkeletons } from './BusinessControllerSkeletons'
 export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   const {
     navigation,
@@ -55,6 +56,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   } = props
 
   const screenHeight = Dimensions.get('window').height;
+  const screenWidth = Dimensions.get('window').width;
   const theme = useTheme()
   const [orderState] = useOrder()
   const { top } = useSafeAreaInsets();
@@ -81,6 +83,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { level: '5', content: '$$$$$' }
   ]
 
+  const isFocused = useIsFocused();
+
   const styles = StyleSheet.create({
     container: {
       paddingHorizontal: 40,
@@ -97,10 +101,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     productsContainer: {
       marginTop: 20
     },
-    maxContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between'
-    },
     businessTypesContainer: {
       width: '100%',
       flexDirection: 'row',
@@ -135,7 +135,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       borderWidth: 0
     },
     applyButton: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 10,
       width: '100%',
       marginTop: 20
     }
@@ -146,10 +146,14 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }
 
   const handleCloseFilters = () => {
-    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
+    clearFilters()
     setOpenFilters(false)
   }
 
+  const clearFilters = () => {
+    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
+  }
+
   const handleChangeActiveBusinessType = (type: any) => {
     if (type?.id === null) {
       handleChangeFilters('business_types', [])
@@ -182,6 +186,30 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     setOpenFilters(false)
   }
 
+  const isInteger = (val: any) => Number.isInteger(Number(val)) && !!val
+
+  const onProductClick = (business: any, categoryId: any, productId: any) => {
+    if (!isInteger(business?.id) ||
+      !isInteger(categoryId) ||
+      !isInteger(productId) ||
+      !business.slug || !business.header || !business.logo) {
+      showToast(ToastType.error, t('NOT_AVAILABLE', 'Not Available'))
+      return
+    }
+
+    navigation.navigate('ProductDetails', {
+      isRedirect: 'business',
+      businessId: business?.id,
+      categoryId: categoryId,
+      productId: productId,
+      business: {
+        store: business.slug,
+        header: business.header,
+        logo: business.logo,
+      }
+    })
+  }
+
   useEffect(() => {
     if (filters.business_types?.length === 0 && filters.orderBy === 'default' && Object.keys(filters)?.length === 2 && !openFilters) {
       handleSearchbusinessAndProducts(true)
@@ -192,110 +220,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleSearchbusinessAndProducts(true)
   }, [])
 
-  const MaxSectionItem = ({ title, options, filter }: any) => {
-    const parseValue = (option: number) => {
-      return filter === 'max_distance'
-        ? `${option / 1000} ${t('KM', 'Km')}`
-        : filter === 'max_eta'
-          ? `${option} ${t('MIN', 'min')}`
-          : parsePrice(option)
-    }
-    return (
-      <View style={{ marginBottom: 20 }}>
-        <OText weight='bold' mBottom={10} size={16}>
-          {title}
-        </OText>
-        <ProgressContentWrapper>
-          <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
-        </ProgressContentWrapper>
-        <View style={styles.maxContainer}>
-          {options.map((option: any, i: number) => (
-            <TouchableOpacity
-              onPress={() => handleChangeFilters(filter, option)}
-              key={option}
-            >
-              <OText
-                size={12}
-                weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
-              >
-                {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
-              </OText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
-    )
-  }
 
-  const BusinessControllerSkeletons = () => {
-    return (
-      <>
-        {[
-          ...Array(
-            paginationProps.nextPageItems
-              ? paginationProps.nextPageItems
-              : 3,
-          ).keys(),
-        ].map((item, i) => (
-          <Placeholder
-            Animation={Fade}
-            key={i}
-            style={{ width: 320, marginRight: 20, marginTop: 20 }}>
-            <View style={{ width: 320 }}>
-              <PlaceholderLine
-                height={155}
-                style={{ marginBottom: 20, borderRadius: 25 }}
-              />
-              <View style={{ paddingHorizontal: 10 }}>
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                  }}>
-                  <PlaceholderLine
-                    height={25}
-                    width={40}
-                    style={{ marginBottom: 10 }}
-                  />
-                  <PlaceholderLine
-                    height={25}
-                    width={20}
-                    style={{ marginBottom: 10 }}
-                  />
-                </View>
-                <PlaceholderLine
-                  height={20}
-                  width={30}
-                  style={{ marginBottom: 10 }}
-                />
-                <PlaceholderLine
-                  height={20}
-                  width={80}
-                  style={{ marginBottom: 0 }}
-                />
-              </View>
-            </View>
-          </Placeholder>
-        ))}
-      </>
-    )
-  }
+  useEffect(() => {
+    handleChangeTermValue('')
+  }, [isFocused])
 
   return (
-    <ScrollView style={styles.container}>
-      <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
-        <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', paddingVertical: 20 }}>
-          <OIcon src={theme.images.general.arrow_left} width={20} />
-        </TouchableOpacity>
-        <OText
-          size={20}
-          mBottom={15}
-          weight='bold'
-          style={{ marginTop: 10 }}
-        >
-          {t('SEARCH', 'Search')}
-        </OText>
-      </WrapHeader>
+    <BContainer>
       <SearchWrapper>
         <SearchBar
           lazyLoad
@@ -305,7 +236,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           value={termValue}
           iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
         />
-
       </SearchWrapper>
       {
         noResults && (
@@ -316,12 +246,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </View>
         )
       }
-      {businessesSearchList.businesses?.length > 0 && (
+      {businessesSearchList.businesses?.length > 0 && termValue?.length === 0 && (
         <MyOrders
           hideOrders
           businessesSearchList={businessesSearchList}
           onNavigationRedirect={onNavigationRedirect}
           BusinessControllerSkeletons={BusinessControllerSkeletons}
+          businessPaginationProps={paginationProps}
         />
       )}
 
@@ -336,10 +267,11 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             key={business.id}
             business={business}
             isBusinessOpen={business.open}
+            enableIntersection={false}
             handleCustomClick={() => onBusinessClick(business)}
             handleUpdateBusinessList={handleUpdateBusinessList}
             orderType={orderState?.options?.type}
-            style={{ width: 320, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
+            style={{ width: screenWidth - 120, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
           />
         ))}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
@@ -354,7 +286,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </LoadMoreBusinessContainer>
         )}
         {businessesSearchList.loading && (
-          <BusinessControllerSkeletons />
+          <BusinessControllerSkeletons paginationProps={paginationProps} />
         )}
       </ScrollView>
       <ProductsList>
@@ -401,17 +333,18 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                 style={{ borderRadius: 50, paddingLeft: 5, paddingRight: 5, height: 20 }}
               />
             </SingleBusinessContainer>
-            <ScrollView horizontal style={styles.productsContainer}>
+            <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={() => { }}
+                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
-                  style={{ width: 320, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
+                  style={{ width: screenWidth - 80, maxWidth: screenWidth - 80, marginRight: 20 }}
                 />
               )))}
 
@@ -554,22 +487,28 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </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>
@@ -589,14 +528,28 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             </TagsContainer>
           )}
         </ScrollView>
-        <OButton
-          text={t('APPLY', 'Apply')}
-          parentStyle={styles.applyButton}
-          textStyle={{ color: '#fff' }}
-          onClick={() => handleApplyFilters()}
-        />
+        <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>
-    </ScrollView>
+    </BContainer>
   )
 }
 

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

@@ -1,5 +1,9 @@
 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;
@@ -55,18 +59,6 @@ export const LoadMoreBusinessContainer = styled.View`
   margin-left: 20px;
 `
 
-export const ProgressBar = styled.View`
-  height: 4px;
-  background: ${(props: any) => props.theme.colors.textNormal};
-`
-
-export const ProgressContentWrapper = styled.View`
-  height: 4px;
-  background: #F8F9FA;
-  margin-bottom: 10px;
-  flex: 1;
-`
-
 export const TagsContainer = styled.View`
   padding-bottom: 10px;
 `
@@ -94,3 +86,9 @@ export const OptionTitle = styled.View`
 		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
 	`}
 `
+
+export const WrapperButtons = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+`

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import { useTheme } from 'styled-components/native'
+import { StyleSheet } from 'react-native'
+import { SubCategoriesContainer, ContainerButton } from './styles'
+import { OButton } from '../../shared'
+import { useLanguage } from 'ordering-components/native'
+
+function SubcategoriesComponentPropsAreEqual(prev: any, next: any) {
+    return prev.subcategoriesSelected === next.subcategoriesSelected &&
+        prev.category === next.category
+}
+
+interface SubcategoriesComponentParams {
+    subcategoriesSelected?: any,
+    category?: any,
+    onClickSubcategory: any
+}
+
+const SubcategoriesComponent = (props : SubcategoriesComponentParams) => {
+    const {
+        subcategoriesSelected,
+        category,
+        onClickSubcategory
+    } = props
+
+    const theme = useTheme()
+    const [, t] = useLanguage()
+    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
+
+    const bpStyles = StyleSheet.create({
+        catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
+        catIcon: {
+            borderRadius: 7.6,
+            shadowColor: '#000000',
+            shadowOpacity: 0.1,
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 1,
+            marginEnd: 13,
+        },
+        categoryButtonStyle: {
+            borderWidth: 0,
+            marginLeft: 5,
+            marginRight: 5,
+            marginBottom: 10,
+            height: 35,
+            paddingLeft: 3,
+            paddingRight: 3,
+        }
+    });
+
+
+    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>
+    )
+}
+
+export const SubcategoriesComponentMemoized = React.memo(SubcategoriesComponent, SubcategoriesComponentPropsAreEqual)

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

@@ -0,0 +1,12 @@
+import styled from "styled-components/native";
+
+export const SubCategoriesContainer = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+`
+
+export const ContainerButton = styled.View`
+`
+
+export const HeaderWrapper = styled.View``

package/themes/original/src/components/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}
                     />
                   ),
               )}
@@ -233,18 +219,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={!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)}
                     />
                   ))}
@@ -259,19 +251,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>
             ),
           )}
         </>