ordering-ui-react-native 0.14.96 → 0.14.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.96",
+  "version": "0.14.97",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
-import { OIcon, OText } from '../shared';
+import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native';
+import { useTheme } from 'styled-components/native';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -32,8 +33,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
   const [{ configs }] = useConfig()
+  const theme = useTheme()
   const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
-
+  const [openDescription, setOpenDescription] = useState<any>(null)
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
     const categoryKey = 'cat_' + categoryId
@@ -84,8 +86,11 @@ 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 shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
+
         return (
           <React.Fragment key={'cat_' + category.id}>
             {products.length > 0 && (
@@ -106,6 +111,28 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     {category.name}
                   </OText>
                 </View>
+                {!!category?.description && (
+                  <View style={{ position: 'relative' }}>
+                    <OText size={12} weight={'500'} mBottom={5}>
+                      {shortCategoryDescription}
+                      {category?.description?.length > 80 && (
+                        <OButton
+                          style={{ height: 15, paddingRight: 0, paddingLeft: 0, borderWidth: 0 }}
+                          text={t('SEE_MORE', 'See more')}
+                          parentStyle={{ padding: 0 }}
+                          onClick={() => setOpenDescription(category)}
+                          bgColor='transparent'
+                          textStyle={{
+                            fontSize: 12,
+                            borderBottomWidth: 1,
+                            borderBottomColor: theme.colors.primary,
+                            color: theme.colors.primary
+                          }}
+                        />
+                      )}
+                    </OText>
+                  </View>
+                )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
@@ -188,6 +215,23 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
+      <OModal
+        open={!!openDescription}
+        title={openDescription?.name}
+        onClose={() => setOpenDescription(null)}
+      >
+        <View style={{ padding: 20 }}>
+          {!!openDescription?.image && (
+            <OIcon
+              url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
+              width={240}
+              height={240}
+              style={{ borderRadius: 7.6 }}
+            />
+          )}
+          <OText>{openDescription?.description}</OText>
+        </View>
+      </OModal>
     </ProductsContainer>
   );
 };