ordering-ui-react-native 0.16.26 → 0.16.29

package/package.json

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

package/themes/business/src/components/ProductItemAccordion/index.tsx

@@ -153,7 +153,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                 {(
                   productInfo?.()?.ingredients?.length > 0 ||
                   productInfo?.()?.options?.length > 0 ||
-                  product.comment
+                  !!product.comment
                 ) && !isClickableEvent && (
                     <MaterialCommunityIcon name="chevron-down" size={12} />
                   )}
@@ -278,7 +278,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               </ProductOptionsList>
             )}
 
-            {product.comment && (
+            {!!product.comment && (
               <ProductComment>
                 <OText
                   size={12}

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

@@ -55,6 +55,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   } = props
 
   const screenHeight = Dimensions.get('window').height;
+  const screenWidth = Dimensions.get('window').width;
   const theme = useTheme()
   const [orderState] = useOrder()
   const { top } = useSafeAreaInsets();
@@ -339,7 +340,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             handleCustomClick={() => onBusinessClick(business)}
             handleUpdateBusinessList={handleUpdateBusinessList}
             orderType={orderState?.options?.type}
-            style={{ width: 320, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
+            style={{ width: screenWidth - 80, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
           />
         ))}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
@@ -411,7 +412,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   onProductClick={() => { }}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
-                  style={{ width: 320, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
+                  style={{ width: screenWidth - 80, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
                 />
               )))}
 

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/index.tsx

@@ -7,11 +7,12 @@ import { ListWrapper } from './styles'
 import {
   View,
   StyleSheet,
-  ScrollView
+  ScrollView,
+  Dimensions
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams) => {
+export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams) => {
   const {
     navigation,
     businessesList,
@@ -23,6 +24,8 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
   } = props
 
   const [orderState] = useOrder()
+  const windowWidth = Dimensions.get('window').width;
+
   const onBusinessClick = (business: any) => {
     onNavigationRedirect('Business', { store: business.slug })
   }
@@ -120,7 +123,7 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
         <>
           {!businessLoading && (
             <BusinessControllerList
-              style={{ width: 320, marginRight: 20 }}
+              style={{ width: windowWidth - 80, marginRight: 20 }}
             />
           )}
         </>
@@ -137,7 +140,7 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
   )
 }
 
-export const PreviousBusinessOrdered = (props) => {
+export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
   const previousBusinessOrderedController = {
     ...props,
     UIComponent: PreviousBusinessOrderedUI,

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ScrollView, StyleSheet } from 'react-native'
+import { ScrollView, StyleSheet, Dimensions } from 'react-native'
 import {
   ListWrapper
 } from './styles'
@@ -7,13 +7,15 @@ import {
 import { SingleProductCard } from '../../SingleProductCard'
 import { PreviousProductsOrderedParams } from '../../../types'
 
-export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) => {
+export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) => {
   const {
     products,
     onProductClick,
     isBusinessesSearchList
   } = props
 
+  const windowWidth = Dimensions.get('window').width;
+
   const styles = StyleSheet.create({
     container: {
       marginBottom: 0,
@@ -24,15 +26,15 @@ export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) =
     return (
       <>
         {products?.map((product: any) => (
-          <SingleProductCard
-            key={product?.id}
-            isSoldOut={(product.inventoried && !product.quantity)}
-            product={product}
-            businessId={product?.business?.id}
-            onProductClick={onProductClick}
-            style={style}
-            productAddedToCartLength={0}
-          />
+            <SingleProductCard
+              key={product?.id}
+              isSoldOut={(product.inventoried && !product.quantity)}
+              product={product}
+              businessId={product?.business?.id}
+              onProductClick={onProductClick}
+              style={style}
+              productAddedToCartLength={0}
+            />
         ))}
       </>
     )
@@ -40,7 +42,7 @@ export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) =
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
-        <ProductList style={{ width: 320, marginRight: 20 }} />
+        <ProductList style={{ width: windowWidth - 80, marginRight: 20 }} />
       ) : (
         <ListWrapper isBusinessesSearchList={isBusinessesSearchList}>
           <ProductList />

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

@@ -9,13 +9,20 @@ import {
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
-import { OText, OIcon } from '../shared';
+import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
+import { OText } from '../shared';
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
 
-const SinguleProductCardUI = (props: SingleProductCardParams) => {
+function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
+	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
+		prevProps.isSoldOut === nextProps.isSoldOut &&
+		prevProps.productAddedToCartLength === nextProps.productAddedToCartLength &&
+		prevProps.categoryState === nextProps.categoryState
+}
+
+const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const {
 		product,
 		isSoldOut,
@@ -188,9 +195,13 @@ const SinguleProductCardUI = (props: SingleProductCardParams) => {
 						resizeMode={FastImage.resizeMode.cover}
 					/>
 				) : (
-					<OIcon
-						src={theme?.images?.dummies?.product}
+					<FastImage
 						style={styles.productStyle}
+						source={{
+							uri: Image.resolveAssetSource(theme.images.dummies.product).uri,
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
 					/>
 				)}
 			</LogoWrapper>
@@ -204,7 +215,7 @@ const SinguleProductCardUI = (props: SingleProductCardParams) => {
 			)}
 		</CardContainer>
 	);
-};
+}, SingleProductCardPropsAreEqual);
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const singleProductCardProps = {