ordering-ui-react-native 0.16.9 → 0.16.10-release

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

@@ -10,6 +10,9 @@ 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';
+import { OrderItAgain } from '../OrderItAgain'
+import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -33,7 +36,10 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     subcategoriesSelected,
     onClickCategory,
     lazyLoadProductsRecommended,
-    isFiltMode
+    handleUpdateProducts,
+    previouslyProducts,
+    isFiltMode,
+    navigation
   } = props;
 
   const [, t] = useLanguage();
@@ -65,66 +71,47 @@ 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) =>
             !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) => (
+          ?.map((product: any, i: number) => (
             <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}
             />
           ))
       }
@@ -145,9 +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}
                     />
                   ),
               )}
@@ -228,16 +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={i}
+                      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)}
                     />
                   ))}
@@ -252,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>
             ),
           )}
         </>
@@ -313,23 +317,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
-      <OModal
-        open={!!openDescription}
-        onClose={() => setOpenDescription(null)}
-      >
-        <OText size={20} style={{paddingLeft: 70, paddingRight: 20, bottom: 25}}>{openDescription?.name}</OText>
-        <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={60}>{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;
   `}