ordering-ui-react-native 0.24.43-test → 0.25.1

package/themes/instacart/src/components/BusinessProductsCategories/index.tsx

@@ -1,71 +1,71 @@
-import React from 'react'
-import { BusinessProductsCategories as ProductsCategories } from 'ordering-components/native'
-import { ScrollView, StyleSheet, View } from 'react-native'
-import { Tab } from './styles'
-import { OText } from '../shared'
-import { BusinessProductsCategoriesParams } from '../../types'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { useTheme } from 'styled-components/native'
-
-const BusinessProductsCategoriesUI = (props: any) => {
-  const {
-    featured,
-    categories,
-    handlerClickCategory,
-    categorySelected,
-    loading
-  } = props
-
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    container: {
-      paddingHorizontal: 20,
-      paddingVertical: 10,
-      borderBottomColor: theme.colors.lightGray,
-    },
-    featuredStyle: {
-      display: 'none'
-    }
-  })
-
-  return (
-    <ScrollView horizontal style={{...styles.container, borderBottomWidth: loading ? 0 : 1}} showsHorizontalScrollIndicator={false}>
-      {loading && (
-        <Placeholder Animation={Fade}>
-          <View style={{ flexDirection: 'row' }}>
-            {[...Array(4)].map((_, i) => (
-              <PlaceholderLine key={i} width={10} style={{marginRight: 5}}/>
-              ))}
-          </View>
-        </Placeholder>
-      )}
-      {
-        !loading && categories && categories.length && categories.map((category: any) => (
-          <Tab
-          key={category.name}
-          onPress={() => handlerClickCategory(category)}
-          style={(category.id === 'featured') && !featured && styles.featuredStyle}
-          >
-            <OText
-              color={categorySelected?.id === category.id ? theme.colors.primary : ''}
-              >
-              {category.name}
-            </OText>
-          </Tab>
-        ))
-      }
-    </ScrollView>
-  )
-}
-
-export const BusinessProductsCategories = (props: BusinessProductsCategoriesParams) => {
-  const businessProductsCategoriesProps = {
-    ...props,
-    UIComponent: BusinessProductsCategoriesUI
-  }
-
-  return (
-    <ProductsCategories {...businessProductsCategoriesProps} />
-  )
-}
+import React from 'react'
+import { BusinessProductsCategories as ProductsCategories } from 'ordering-components/native'
+import { ScrollView, StyleSheet, View } from 'react-native'
+import { Tab } from './styles'
+import { OText } from '../shared'
+import { BusinessProductsCategoriesParams } from '../../types'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { useTheme } from 'styled-components/native'
+
+const BusinessProductsCategoriesUI = (props: any) => {
+  const {
+    featured,
+    categories,
+    handlerClickCategory,
+    categorySelected,
+    loading
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    container: {
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      borderBottomColor: theme.colors.lightGray,
+    },
+    featuredStyle: {
+      display: 'none'
+    }
+  })
+
+  return (
+    <ScrollView horizontal style={{...styles.container, borderBottomWidth: loading ? 0 : 1}} showsHorizontalScrollIndicator={false}>
+      {loading && (
+        <Placeholder Animation={Fade}>
+          <View style={{ flexDirection: 'row' }}>
+            {[...Array(4)].map((_, i) => (
+              <PlaceholderLine key={i} width={10} style={{marginRight: 5}}/>
+              ))}
+          </View>
+        </Placeholder>
+      )}
+      {
+        !loading && categories && categories.length && categories.map((category: any) => (
+          <Tab
+          key={category.name}
+          onPress={() => handlerClickCategory(category)}
+          style={(category.id === 'featured') && !featured && styles.featuredStyle}
+          >
+            <OText
+              color={categorySelected?.id === category.id ? theme.colors.primary : ''}
+              >
+              {category.name}
+            </OText>
+          </Tab>
+        ))
+      }
+    </ScrollView>
+  )
+}
+
+export const BusinessProductsCategories = (props: BusinessProductsCategoriesParams) => {
+  const businessProductsCategoriesProps = {
+    ...props,
+    UIComponent: BusinessProductsCategoriesUI
+  }
+
+  return (
+    <ProductsCategories {...businessProductsCategoriesProps} />
+  )
+}

package/themes/instacart/src/components/BusinessProductsCategories/styles.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components/native'
-import {I18nManager} from 'react-native'
-
-export const Tab = styled.TouchableOpacity`
-  padding-right: ${I18nManager.isRTL ? 0 : '20px' };
-  padding-left: ${I18nManager.isRTL ? '20px' : 0 };
-`
+import styled from 'styled-components/native'
+import {I18nManager} from 'react-native'
+
+export const Tab = styled.TouchableOpacity`
+  padding-right: ${I18nManager.isRTL ? 0 : '20px' };
+  padding-left: ${I18nManager.isRTL ? '20px' : 0 };
+`

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

@@ -1,181 +1,181 @@
-import React, { useState, useEffect } from 'react'
-import { ProductsList, useLanguage } from 'ordering-components/native'
-import { SingleProductCard } from '../SingleProductCard'
-import { NotFoundSource } from '../NotFoundSource'
-import { BusinessProductsListParams } from '../../types'
-import { OText } from '../shared'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { Platform, View, TouchableOpacity } from 'react-native'
-import { useTheme } from 'styled-components/native'
-import {
-  ProductsContainer,
-  ErrorMessage,
-  WrapperNotFound,
-  ProductsWrapper
-} from './styles'
-import { ScrollView } from 'react-native-gesture-handler'
-
-const BusinessProductsListUI = (props: BusinessProductsListParams) => {
-  const {
-    errors,
-    businessId,
-    category,
-    categories,
-    categoryState,
-    onProductClick,
-    featured,
-    searchValue,
-    isBusinessLoading,
-    handleSearchRedirect,
-    handleClearSearch,
-    errorQuantityProducts,
-    handleCancelSearch,
-    handlerClickCategory
-  } = props
-
-  const [, t] = useLanguage()
-  const theme = useTheme()
-  const [allProducts, setAllProducts] = useState([])
-
-  useEffect(() => {
-    if (category?.id) return
-    if (Array.isArray(categoryState?.products)) {
-      if (categoryState?.products.length > allProducts.length) {
-        setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
-      }
-      if (searchValue) {
-        setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
-      }
-    }
-  }, [category, categoryState, searchValue])
-
-  return (
-    <ProductsContainer>
-      {/* {category.id && (
-        categoryState.products?.map((product: any, index: number) => (
-          <SingleProductCard
-            key={index}
-            isSoldOut={(product.inventoried && !product.quantity)}
-            product={product}
-            businessId={businessId}
-            onProductClick={() => onProductClick(product)}
-          />
-        ))
-      )} */}
-
-      {
-        featured && allProducts?.find((product: any) => product.featured) && (
-          <>
-            <TouchableOpacity
-              onPress={() => handlerClickCategory({ id: 'featured', name: 'Featured' })}
-            >
-              <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
-            </TouchableOpacity>
-            <ProductsWrapper>
-              {allProducts?.map((product: any, index: number) => product.featured && (
-                <SingleProductCard
-                  key={index}
-                  isSoldOut={(product.inventoried && !product.quantity)}
-                  product={product}
-                  businessId={businessId}
-                  onProductClick={onProductClick}
-                />
-              ))}
-            </ProductsWrapper>
-          </>
-        )
-      }
-
-      {
-        categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
-          const products = allProducts?.filter((product: any) => product.category_id === category.id) || []
-          return (
-            <View key={category.id} style={{alignItems: 'flex-start'}}>
-              {
-                products.length > 0 && (
-                  <>
-                    <TouchableOpacity
-                      onPress={() => handlerClickCategory(category)}
-                    >
-                      <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold'}} mBottom={10}>{category.name}</OText>
-                    </TouchableOpacity>
-                    <ProductsWrapper>
-                      {
-                        products.map((product: any, index: number) => (
-                          <SingleProductCard
-                            key={index}
-                            isSoldOut={product.inventoried && !product.quantity}
-                            businessId={businessId}
-                            product={product}
-                            onProductClick={onProductClick}
-                          />
-                        ))
-                      }
-                    </ProductsWrapper>
-                  </>
-                )
-              }
-            </View>
-          )
-        })
-      }
-
-      {
-        (categoryState.loading || isBusinessLoading) && (
-          <Placeholder style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
-            <PlaceholderLine width={50} height={16} style={{ marginBottom: 20 }} />
-            {[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
-              <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                <View style={{flexBasis: '47%'}}>
-                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
-                  <Placeholder>
-                      <PlaceholderLine width={20} />
-                      <PlaceholderLine width={60} style={{marginBottom: 12}}/>
-                  </Placeholder>
-                </View>
-                <View style={{flexBasis: '47%'}}>
-                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
-                  <Placeholder>
-                      <PlaceholderLine width={20} />
-                      <PlaceholderLine width={60} style={{marginBottom: 25}}/>
-                  </Placeholder>
-                </View>
-              </View>
-            ))}
-          </Placeholder>
-        )
-      }
-      {
-        !categoryState.loading && !isBusinessLoading && categoryState.products.length === 0 && !errors && !((searchValue && errorQuantityProducts) || (!searchValue && !errorQuantityProducts)) && (
-          <WrapperNotFound>
-            <NotFoundSource
-              content={!searchValue ? t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time') : t('ERROR_NOT_FOUND_PRODUCTS', 'No products found, please change filters.')}
-              btnTitle={!searchValue ? t('SEARCH_REDIRECT', 'Go to Businesses') : t('CLEAR_FILTERS', 'Clear filters')}
-              onClickButton={() => !searchValue ? handleSearchRedirect && handleSearchRedirect() : handleCancelSearch && handleCancelSearch()}
-            />
-          </WrapperNotFound>
-        )
-      }
-
-      {errors && errors.length > 0 && (
-        errors.map((e: any, i: number) => (
-          <ErrorMessage key={i}>
-            <OText space>ERROR:</OText>
-            <OText>{e}</OText>
-          </ErrorMessage>
-        ))
-      )}
-    </ProductsContainer>
-  )
-}
-
-export const BusinessProductsList = (props: BusinessProductsListParams) => {
-  const businessProductsListProps = {
-    ...props,
-    UIComponent: BusinessProductsListUI
-  }
-
-  return (
-    <ProductsList {...businessProductsListProps} />
-  )
-}
+import React, { useState, useEffect } from 'react'
+import { ProductsList, useLanguage } from 'ordering-components/native'
+import { SingleProductCard } from '../SingleProductCard'
+import { NotFoundSource } from '../NotFoundSource'
+import { BusinessProductsListParams } from '../../types'
+import { OText } from '../shared'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { Platform, View, TouchableOpacity } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import {
+  ProductsContainer,
+  ErrorMessage,
+  WrapperNotFound,
+  ProductsWrapper
+} from './styles'
+import { ScrollView } from 'react-native-gesture-handler'
+
+const BusinessProductsListUI = (props: BusinessProductsListParams) => {
+  const {
+    errors,
+    businessId,
+    category,
+    categories,
+    categoryState,
+    onProductClick,
+    featured,
+    searchValue,
+    isBusinessLoading,
+    handleSearchRedirect,
+    handleClearSearch,
+    errorQuantityProducts,
+    handleCancelSearch,
+    handlerClickCategory
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [allProducts, setAllProducts] = useState([])
+
+  useEffect(() => {
+    if (category?.id) return
+    if (Array.isArray(categoryState?.products)) {
+      if (categoryState?.products.length > allProducts.length) {
+        setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
+      }
+      if (searchValue) {
+        setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
+      }
+    }
+  }, [category, categoryState, searchValue])
+
+  return (
+    <ProductsContainer>
+      {/* {category.id && (
+        categoryState.products?.map((product: any, index: number) => (
+          <SingleProductCard
+            key={index}
+            isSoldOut={(product.inventoried && !product.quantity)}
+            product={product}
+            businessId={businessId}
+            onProductClick={() => onProductClick(product)}
+          />
+        ))
+      )} */}
+
+      {
+        featured && allProducts?.find((product: any) => product.featured) && (
+          <>
+            <TouchableOpacity
+              onPress={() => handlerClickCategory({ id: 'featured', name: 'Featured' })}
+            >
+              <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
+            </TouchableOpacity>
+            <ProductsWrapper>
+              {allProducts?.map((product: any, index: number) => product.featured && (
+                <SingleProductCard
+                  key={index}
+                  isSoldOut={(product.inventoried && !product.quantity)}
+                  product={product}
+                  businessId={businessId}
+                  onProductClick={onProductClick}
+                />
+              ))}
+            </ProductsWrapper>
+          </>
+        )
+      }
+
+      {
+        categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
+          const products = allProducts?.filter((product: any) => product.category_id === category.id) || []
+          return (
+            <View key={category.id} style={{alignItems: 'flex-start'}}>
+              {
+                products.length > 0 && (
+                  <>
+                    <TouchableOpacity
+                      onPress={() => handlerClickCategory(category)}
+                    >
+                      <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold'}} mBottom={10}>{category.name}</OText>
+                    </TouchableOpacity>
+                    <ProductsWrapper>
+                      {
+                        products.map((product: any, index: number) => (
+                          <SingleProductCard
+                            key={index}
+                            isSoldOut={product.inventoried && !product.quantity}
+                            businessId={businessId}
+                            product={product}
+                            onProductClick={onProductClick}
+                          />
+                        ))
+                      }
+                    </ProductsWrapper>
+                  </>
+                )
+              }
+            </View>
+          )
+        })
+      }
+
+      {
+        (categoryState.loading || isBusinessLoading) && (
+          <Placeholder style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
+            <PlaceholderLine width={50} height={16} style={{ marginBottom: 20 }} />
+            {[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
+              <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <View style={{flexBasis: '47%'}}>
+                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+                  <Placeholder>
+                      <PlaceholderLine width={20} />
+                      <PlaceholderLine width={60} style={{marginBottom: 12}}/>
+                  </Placeholder>
+                </View>
+                <View style={{flexBasis: '47%'}}>
+                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+                  <Placeholder>
+                      <PlaceholderLine width={20} />
+                      <PlaceholderLine width={60} style={{marginBottom: 25}}/>
+                  </Placeholder>
+                </View>
+              </View>
+            ))}
+          </Placeholder>
+        )
+      }
+      {
+        !categoryState.loading && !isBusinessLoading && categoryState.products.length === 0 && !errors && !((searchValue && errorQuantityProducts) || (!searchValue && !errorQuantityProducts)) && (
+          <WrapperNotFound>
+            <NotFoundSource
+              content={!searchValue ? t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time') : t('ERROR_NOT_FOUND_PRODUCTS', 'No products found, please change filters.')}
+              btnTitle={!searchValue ? t('SEARCH_REDIRECT', 'Go to Businesses') : t('CLEAR_FILTERS', 'Clear filters')}
+              onClickButton={() => !searchValue ? handleSearchRedirect && handleSearchRedirect() : handleCancelSearch && handleCancelSearch()}
+            />
+          </WrapperNotFound>
+        )
+      }
+
+      {errors && errors.length > 0 && (
+        errors.map((e: any, i: number) => (
+          <ErrorMessage key={i}>
+            <OText space>ERROR:</OText>
+            <OText>{e}</OText>
+          </ErrorMessage>
+        ))
+      )}
+    </ProductsContainer>
+  )
+}
+
+export const BusinessProductsList = (props: BusinessProductsListParams) => {
+  const businessProductsListProps = {
+    ...props,
+    UIComponent: BusinessProductsListUI
+  }
+
+  return (
+    <ProductsList {...businessProductsListProps} />
+  )
+}

package/themes/instacart/src/components/BusinessProductsList/styles.tsx

@@ -1,19 +1,19 @@
-import styled from 'styled-components/native'
-
-export const ProductsContainer = styled.View`
-`
-export const ErrorMessage = styled.View`
-  padding: 20px;
-  width: 100%;
-  background-color: #CCCCCC;
-  font-weight: bold;
-`
-
-export const WrapperNotFound = styled.View`
-  height: 500px;
-`
-export const ProductsWrapper = styled.View`
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-`
+import styled from 'styled-components/native'
+
+export const ProductsContainer = styled.View`
+`
+export const ErrorMessage = styled.View`
+  padding: 20px;
+  width: 100%;
+  background-color: #CCCCCC;
+  font-weight: bold;
+`
+
+export const WrapperNotFound = styled.View`
+  height: 500px;
+`
+export const ProductsWrapper = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+`