ordering-ui-react-native 0.15.73 → 0.15.74-release

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

@@ -10,6 +10,8 @@ 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'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -33,7 +35,10 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     subcategoriesSelected,
     onClickCategory,
     lazyLoadProductsRecommended,
-    isFiltMode
+    handleUpdateProducts,
+    previouslyProducts,
+    isFiltMode,
+    navigation
   } = props;
 
   const [, t] = useLanguage();
@@ -103,7 +108,6 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     )
   }
 
-
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
       <HeaderWrapper>
@@ -111,20 +115,35 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           <SubcategoriesComponent category={category} />
         )}
       </HeaderWrapper>
+      {previouslyProducts?.length > 0 && (
+        <OrderItAgain
+          onProductClick={onProductClick}
+          productList={previouslyProducts}
+          businessId={businessId}
+          categoryState={categoryState}
+          navigation={navigation}
+          handleUpdateProducts={handleUpdateProducts}
+          currentCart={currentCart}
+        />
+      )}
       {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}
               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 +164,13 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
+                      enableIntersection={!isFiltMode}
                       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}
                     />
                   ),
               )}
@@ -212,7 +235,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'
@@ -233,11 +256,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
-                      key={i}
+                      key={`${product?.id}_${i}`}
+                      enableIntersection={!isFiltMode}
                       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 +279,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 }}>
+                <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 +345,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;
   `}