ordering-ui-react-native 0.16.69 → 0.16.70-release

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

@@ -12,6 +12,7 @@ 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 {
@@ -70,49 +71,15 @@ 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 && (
@@ -124,6 +91,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           navigation={navigation}
           handleUpdateProducts={handleUpdateProducts}
           currentCart={currentCart}
+          searchValue={searchValue}
         />
       )}
       {category.id &&
@@ -136,7 +104,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection
+              enableIntersection={!isFiltMode && categoryState.products?.length < 80}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -164,7 +132,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
@@ -198,14 +166,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   style={bpStyles.catWrap}
                   onLayout={(event: any) => handleOnLayout(event, category.id)}
                 >
-                  <View style={bpStyles.catIcon}>
-                    <OIcon
-                      url={optimizeImage(category.image, 'h_250,c_limit')}
-                      width={41}
-                      height={41}
-                      style={{ borderRadius: 7.6 }}
-                    />
-                  </View>
+                  {!!category.image && (
+                    <View style={bpStyles.catIcon}>
+                      <OIcon
+                        url={optimizeImage(category.image, 'h_250,c_limit')}
+                        width={41}
+                        height={41}
+                        style={{ borderRadius: 7.6 }}
+                      />
+                    </View>
+                  )}
                   <OText size={16} weight="600">
                     {category.name}
                   </OText>
@@ -251,13 +221,17 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   </View>
                 )}
                 {category?.subcategories?.length > 0 && !isFiltMode && (
-                  <SubcategoriesComponent category={category} />
+                  <SubcategoriesComponentMemoized
+                    category={category}
+                    subcategoriesSelected={subcategoriesSelected}
+                    onClickSubcategory={onClickSubcategory}
+                  />
                 )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
@@ -279,19 +253,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         <>
           {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
             (item, i) => (
-              <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
-                <View style={{ flexDirection: 'row' }}>
+              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }} key={i}>
+                <Placeholder style={{ padding: 5 }} Animation={Fade}>
+                  <View style={{ flexDirection: 'row' }}>
+                    <Placeholder style={{ paddingVertical: 10, flex: 1 }}>
+                      <PlaceholderLine width={60} style={{ marginBottom: 15 }} />
+                      <PlaceholderLine width={20} />
+                    </Placeholder>
+                    <PlaceholderLine
+                      width={24}
+                      height={70}
+                      style={{ marginLeft: 10, marginBottom: 10 }}
+                    />
+                  </View>
                   <PlaceholderLine
-                    width={24}
-                    height={70}
-                    style={{ marginRight: 10, marginBottom: 10 }}
+                    height={52}
                   />
-                  <Placeholder style={{ paddingVertical: 10 }}>
-                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
+                </Placeholder>
+              </View>
             ),
           )}
         </>

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

@@ -18,15 +18,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}