ordering-ui-react-native 0.15.67 → 0.15.68-release

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

@@ -10,6 +10,7 @@ import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
+import { CategoryDescriptionMemoized } from './CategoryDescription';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -32,7 +33,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     setSubcategoriesSelected,
     subcategoriesSelected,
     onClickCategory,
-    lazyLoadProductsRecommended
+    lazyLoadProductsRecommended,
+    handleUpdateProducts,
+    isFiltMode
   } = props;
 
   const [, t] = useLanguage();
@@ -48,24 +51,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     setCategoriesLayout(_categoriesLayout)
   }
 
-  const onClickSubcategory = (subCategory : any, parentCategory : any) => {
+  const onClickSubcategory = (subCategory: any, parentCategory: any) => {
     if (parentCategory && lazyLoadProductsRecommended) {
       onClickCategory(parentCategory)
     }
     if (!subCategory) {
-      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => _subcategory?.parent_category_id !== parentCategory?.id))
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => _subcategory?.parent_category_id !== parentCategory?.id))
       return
     }
-    const categoryFounded = subcategoriesSelected.find((_subcategory : any) => subCategory?.id === _subcategory?.id)
+    const categoryFounded = subcategoriesSelected.find((_subcategory: any) => subCategory?.id === _subcategory?.id)
     if (categoryFounded) {
-      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => subCategory?.id !== _subcategory?.id))
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id))
     } else {
       setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
     }
   }
 
-  const SubcategoriesComponent = ({ category } : any) => {
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory : any) => category?.id === subcategory?.parent_category_id)
+  const SubcategoriesComponent = ({ category }: any) => {
+    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
 
     return (
       <SubCategoriesContainer>
@@ -80,8 +83,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             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)
+        {category?.subcategories?.map((subcategory: any) => {
+          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
           return (
             <ContainerButton
               key={subcategory?.id}
@@ -102,7 +105,6 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     )
   }
 
-
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
       <HeaderWrapper>
@@ -112,21 +114,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       </HeaderWrapper>
       {category.id &&
         categoryState.products
-          ?.filter((product : any) =>
-            !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
-            subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id)
-              ?.sort((a: any, b: any) => a.rank - b.rank)
-              ?.map((product: any) => (
-                <SingleProductCard
-                  key={'prod_' + product.id}
-                  isSoldOut={product.inventoried && !product.quantity}
-                  product={product}
-                  businessId={businessId}
-                  onProductClick={() => onProductClick(product)}
-                  productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                />
-              ))
-          )}
+          ?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
+          ?.sort((a: any, b: any) => a.rank - b.rank)
+          ?.map((product: any, i: number) => (
+            <SingleProductCard
+              key={'prod_' + product.id + `_${i}`}
+              isSoldOut={product.inventoried && !product.quantity}
+              enableIntersection
+              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}
+            />
+          ))
+      }
       {!category.id &&
         featured &&
         categoryState?.products?.find((product: any) => product.featured) && (
@@ -141,11 +146,14 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
-                      key={'feat_' + product.id}
+                      key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
+                      enableIntersection
                       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)}
                     />
                   ),
@@ -156,16 +164,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
         const _products = !isUseParentCategory
-          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
-          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+          ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
         const products = subcategoriesSelected?.length > 0
-          ? _products?.filter((product : any) =>
-            !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
-            subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id))
+          ? _products?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
           : _products
 
         const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
-        
+
         return (
           <React.Fragment key={'cat_' + category.id}>
             {products.length > 0 && (
@@ -211,7 +219,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       {category?.description?.length > 80 && (
                         <OButton
                           style={{ height: 15, paddingRight: 0, paddingLeft: 0, borderWidth: 0 }}
-                          text={t('SEE_MORE', 'See more')}
+                          text={t('VIEW_MORE', 'View more')}
                           parentStyle={{ padding: 0 }}
                           onClick={() => setOpenDescription(category)}
                           bgColor='transparent'
@@ -226,17 +234,20 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     </OText>
                   </View>
                 )}
-                {category?.subcategories?.length > 0 && (
+                {category?.subcategories?.length > 0 && !isFiltMode && (
                   <SubcategoriesComponent category={category} />
                 )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
-                      key={i}
+                      key={`${product?.id}_${i}`}
+                      enableIntersection
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
+                      categoryState={categoryState}
                       onProductClick={onProductClick}
+                      handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ))}
@@ -272,6 +283,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !isBusinessLoading &&
         categoryState.products.length === 0 &&
         !errors &&
+        !isFiltMode &&
         !(
           (searchValue && errorQuantityProducts) ||
           (!searchValue && !errorQuantityProducts)
@@ -311,23 +323,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
-      <OModal
-        open={!!openDescription}
-        title={openDescription?.name}
-        onClose={() => setOpenDescription(null)}
-      >
-        <ScrollView style={{ padding: 20 }}>
-          {!!openDescription?.image && (
-            <OIcon
-              url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
-              width={240}
-              height={240}
-              style={{ borderRadius: 7.6 }}
-            />
-          )}
-          <OText mBottom={40}>{openDescription?.description}</OText>
-        </ScrollView>
-      </OModal>
+      {!!openDescription && (
+        <CategoryDescriptionMemoized
+          openDescription={openDescription}
+          setOpenDescription={setOpenDescription}
+        />
+      )}
     </ProductsContainer>
   );
 };

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;
   `}