ordering-ui-react-native 0.14.17 → 0.14.18

package/src/components/BusinessProductsListing/index.tsx

@@ -1,334 +1,334 @@
-import React, { useState, useEffect } from 'react'
-import { View, TouchableOpacity, StyleSheet, Platform } from 'react-native'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import {
-  BusinessAndProductList,
-  useLanguage,
-  useOrder,
-  useSession,
-  useUtils,
-  useToast,
-  ToastType
-} from 'ordering-components/native'
-import { OButton, OModal, OText } from '../shared'
-import { BusinessBasicInformation } from '../BusinessBasicInformation'
-import { SearchBar } from '../SearchBar'
-import { BusinessProductsCategories } from '../BusinessProductsCategories'
-import { BusinessProductsList } from '../BusinessProductsList'
-import { BusinessProductsListingParams } from '../../types'
-import {
-  WrapHeader,
-  TopHeader,
-  AddressInput,
-  WrapSearchBar,
-  WrapContent,
-  BusinessProductsListingContainer
-} from './styles'
-import { FloatingButton } from '../FloatingButton'
-import { ProductForm } from '../ProductForm'
-import { UpsellingProducts } from '../UpsellingProducts'
-import { useTheme } from 'styled-components/native'
-
-const PIXELS_TO_SCROLL = 1000
-
-const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
-  const {
-    navigation,
-    errors,
-    businessState,
-    categoryState,
-    handleChangeSearch,
-    categorySelected,
-    searchValue,
-    handleSearchRedirect,
-    featuredProducts,
-    errorQuantityProducts,
-    header,
-    logo,
-    productModal,
-    businessId,
-    categoryId,
-    productId,
-    getNextProducts,
-    handleChangeCategory,
-    setProductLogin,
-    updateProductModal,
-  } = props
-
-  const theme = useTheme()
-  const [, t] = useLanguage()
-  const [{ auth }] = useSession()
-  const [orderState] = useOrder()
-  const [{ parsePrice }] = useUtils()
-  const [ ,{showToast}] = useToast()
-  const { business, loading, error } = businessState
-  const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
-  const [isOpenSearchBar, setIsOpenSearchBar] = useState(false)
-  const [curProduct, setCurProduct] = useState(null)
-  const [openUpselling, setOpenUpselling] = useState(false)
-  const [canOpenUpselling, setCanOpenUpselling] = useState(false)
-  const [openModalProduct,setOpenModalProduct] = useState(false)
-  const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
-
-  const onRedirect = (route: string, params?: any) => {
-    navigation.navigate(route, params)
-  }
-
-  const onProductClick = (product: any) => {
-    setCurProduct(product)
-  }
-
-  const handleCancel = () => {
-    setIsOpenSearchBar(false)
-    handleChangeSearch('')
-  }
-
-  const handleCloseProductModal = () => {
-    setCurProduct(null)
-    setOpenModalProduct(false)
-    updateProductModal && updateProductModal(null)
-  }
-
-  const handlerProductAction = () => {
-    handleCloseProductModal()
-  }
-
-  const handleUpsellingPage = () => {
-    onRedirect('CheckoutNavigator', {
-      screen: 'CheckoutPage',
-      cartUuid: currentCart?.uuid,
-      businessLogo: logo,
-      businessName: business?.name,
-      cartTotal: currentCart?.total
-    })
-    setOpenUpselling(false)
-  }
-
-  useEffect(() => {
-    if(businessId && categoryId && productId){
-      setOpenModalProduct(true)
-    }
-  }, [])
-
-  const handleScroll = ({ nativeEvent }: any) => {
-    const y = nativeEvent.contentOffset.y
-    const height = nativeEvent.contentSize.height
-    const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
-    if (y + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
-      getNextProducts()
-      showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
-    }
-  }
-
-  return (
-    <>
-      <BusinessProductsListingContainer
-        style={styles.mainContainer}
-        isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
-        onScroll={(e: any) => handleScroll(e)}
-      >
-        <WrapHeader>
-          {!loading && business?.id && (
-            <TopHeader>
-              {!isOpenSearchBar && (
-                <>
-                  <View style={{ ...styles.headerItem, flex: 1 }}>
-                    <OButton
-                      imgLeftSrc={theme.images.general.arrow_left}
-                      imgRightSrc={null}
-                      style={styles.btnBackArrow}
-                      onClick={() => (navigation?.canGoBack() && navigation.goBack()) || (auth && navigation.navigate('BottomTab'))}
-                      imgLeftStyle={{ tintColor: '#fff' }}
-                    />
-                    <AddressInput
-                      onPress={() => auth
-                        ? onRedirect('AddressList', { isGoBack: true, isFromProductsList: true })
-                        : onRedirect('AddressForm', { address: orderState.options?.address })}
-                    >
-                      <OText color={theme.colors.white} numberOfLines={1}>
-                        {orderState?.options?.address?.address}
-                      </OText>
-                    </AddressInput>
-                  </View>
-                  {!errorQuantityProducts && (
-                    <View style={{ ...styles.headerItem }}>
-                      <TouchableOpacity
-                        onPress={() => setIsOpenSearchBar(true)}
-                        style={styles.searchIcon}
-                      >
-                        <MaterialIcon
-                          name='search'
-                          color={theme.colors.white}
-                          size={25}
-                        />
-                      </TouchableOpacity>
-                    </View>
-                  )}
-                </>
-              )}
-              {isOpenSearchBar && (
-                <WrapSearchBar>
-                  <SearchBar
-                    onSearch={handleChangeSearch}
-                    onCancel={() => handleCancel()}
-                    isCancelXButtonShow
-                    noBorderShow
-                    placeholder={t('SEARCH_PRODUCTS', 'Search Products')}
-                    lazyLoad={businessState?.business?.lazy_load_products_recommended}
-                  />
-                </WrapSearchBar>
-              )}
-            </TopHeader>
-          )}
-          <BusinessBasicInformation
-            businessState={businessState}
-            openBusinessInformation={openBusinessInformation}
-            header={header}
-            logo={logo}
-          />
-        </WrapHeader>
-        {!loading && business?.id && (
-          <>
-            {!(business?.categories?.length === 0) && (
-              <BusinessProductsCategories
-                categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)]}
-                categorySelected={categorySelected}
-                onClickCategory={handleChangeCategory}
-                featured={featuredProducts}
-                openBusinessInformation={openBusinessInformation}
-              />
-            )}
-            <WrapContent>
-              <BusinessProductsList
-                categories={[
-                  { id: null, name: t('ALL', 'All') },
-                  { id: 'featured', name: t('FEATURED', 'Featured') },
-                  ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)
-                ]}
-                category={categorySelected}
-                categoryState={categoryState}
-                businessId={business.id}
-                errors={errors}
-                onProductClick={onProductClick}
-                handleSearchRedirect={handleSearchRedirect}
-                featured={featuredProducts}
-                searchValue={searchValue}
-                handleClearSearch={handleChangeSearch}
-                errorQuantityProducts={errorQuantityProducts}
-                handleCancelSearch={handleCancel}
-              />
-            </WrapContent>
-          </>
-        )}
-        {loading && !error && (
-          <>
-            <BusinessProductsCategories
-              categories={[]}
-              categorySelected={categorySelected}
-              onClickCategory={handleChangeCategory}
-              featured={featuredProducts}
-              openBusinessInformation={openBusinessInformation}
-              loading={loading}
-            />
-            <WrapContent>
-              <BusinessProductsList
-                categories={[]}
-                category={categorySelected}
-                categoryState={categoryState}
-                isBusinessLoading={loading}
-                errorQuantityProducts={errorQuantityProducts}
-              />
-            </WrapContent>
-          </>
-        )}
-      </BusinessProductsListingContainer>
-      {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-        <FloatingButton
-          btnText={
-            currentCart?.subtotal_to_calculate >= currentCart?.minimum
-              ? !openUpselling ? t('VIEW_ORDER', 'View Order') : t('LOADING', 'Loading')
-              : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
-          }
-          isSecondaryBtn={currentCart?.subtotal_to_calculate < currentCart?.minimum}
-          btnLeftValueShow={currentCart?.subtotal_to_calculate >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
-          btnRightValueShow={currentCart?.subtotal_to_calculate >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
-          btnLeftValue={currentCart?.products?.length}
-          btnRightValue={parsePrice(currentCart?.total)}
-          disabled={openUpselling || currentCart?.subtotal_to_calculate < currentCart?.minimum}
-          handleClick={() => setOpenUpselling(true)}
-        />
-      )}
-      <OModal
-        open={openModalProduct || !!curProduct || (!!productModal.product && !orderState.loading)}
-        onClose={handleCloseProductModal}
-        entireModal
-        customClose
-        isAvoidKeyBoardView
-      >
-        <ProductForm
-          product={curProduct || productModal.product}
-          businessSlug={business?.slug}
-          businessId={businessId || business?.id || productModal?.product?.category?.business_id}
-          onClose={handleCloseProductModal}
-          navigation={navigation}
-          onSave={handlerProductAction}
-          setProductLogin={setProductLogin}
-          categoryId={categoryId}
-          productId={productId}
-        />
-      </OModal>
-      {openUpselling && (
-        <UpsellingProducts
-          businessId={currentCart?.business_id}
-          business={currentCart?.business}
-          cartProducts={currentCart?.products}
-          handleUpsellingPage={handleUpsellingPage}
-          openUpselling={openUpselling}
-          canOpenUpselling={canOpenUpselling}
-          setCanOpenUpselling={setCanOpenUpselling}
-        />
-      )}
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-  },
-  BackIcon: {
-    paddingRight: 20,
-  },
-  headerItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 15,
-    marginHorizontal: 20,
-  },
-  btnBackArrow: {
-    borderWidth: 0,
-    color: '#FFF',
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    borderRadius: 24,
-    marginRight: 15,
-  },
-  searchIcon: {
-    borderWidth: 0,
-    color: '#FFF',
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    borderRadius: 24,
-    padding: 15,
-    justifyContent: 'center'
-  }
-})
-
-export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
-  const businessProductslistingProps = {
-    ...props,
-    isForceSearch: Platform.OS === 'ios',
-    UIComponent: BusinessProductsListingUI
-  }
-  return (
-    <BusinessAndProductList {...businessProductslistingProps} />
-  )
-}
+import React, { useState, useEffect } from 'react'
+import { View, TouchableOpacity, StyleSheet, Platform } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import {
+  BusinessAndProductList,
+  useLanguage,
+  useOrder,
+  useSession,
+  useUtils,
+  useToast,
+  ToastType
+} from 'ordering-components/native'
+import { OButton, OModal, OText } from '../shared'
+import { BusinessBasicInformation } from '../BusinessBasicInformation'
+import { SearchBar } from '../SearchBar'
+import { BusinessProductsCategories } from '../BusinessProductsCategories'
+import { BusinessProductsList } from '../BusinessProductsList'
+import { BusinessProductsListingParams } from '../../types'
+import {
+  WrapHeader,
+  TopHeader,
+  AddressInput,
+  WrapSearchBar,
+  WrapContent,
+  BusinessProductsListingContainer
+} from './styles'
+import { FloatingButton } from '../FloatingButton'
+import { ProductForm } from '../ProductForm'
+import { UpsellingProducts } from '../UpsellingProducts'
+import { useTheme } from 'styled-components/native'
+
+const PIXELS_TO_SCROLL = 1000
+
+const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
+  const {
+    navigation,
+    errors,
+    businessState,
+    categoryState,
+    handleChangeSearch,
+    categorySelected,
+    searchValue,
+    handleSearchRedirect,
+    featuredProducts,
+    errorQuantityProducts,
+    header,
+    logo,
+    productModal,
+    businessId,
+    categoryId,
+    productId,
+    getNextProducts,
+    handleChangeCategory,
+    setProductLogin,
+    updateProductModal,
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ auth }] = useSession()
+  const [orderState] = useOrder()
+  const [{ parsePrice }] = useUtils()
+  const [ ,{showToast}] = useToast()
+  const { business, loading, error } = businessState
+  const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
+  const [isOpenSearchBar, setIsOpenSearchBar] = useState(false)
+  const [curProduct, setCurProduct] = useState(null)
+  const [openUpselling, setOpenUpselling] = useState(false)
+  const [canOpenUpselling, setCanOpenUpselling] = useState(false)
+  const [openModalProduct,setOpenModalProduct] = useState(false)
+  const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
+
+  const onRedirect = (route: string, params?: any) => {
+    navigation.navigate(route, params)
+  }
+
+  const onProductClick = (product: any) => {
+    setCurProduct(product)
+  }
+
+  const handleCancel = () => {
+    setIsOpenSearchBar(false)
+    handleChangeSearch('')
+  }
+
+  const handleCloseProductModal = () => {
+    setCurProduct(null)
+    setOpenModalProduct(false)
+    updateProductModal && updateProductModal(null)
+  }
+
+  const handlerProductAction = () => {
+    handleCloseProductModal()
+  }
+
+  const handleUpsellingPage = () => {
+    onRedirect('CheckoutNavigator', {
+      screen: 'CheckoutPage',
+      cartUuid: currentCart?.uuid,
+      businessLogo: logo,
+      businessName: business?.name,
+      cartTotal: currentCart?.total
+    })
+    setOpenUpselling(false)
+  }
+
+  useEffect(() => {
+    if(businessId && categoryId && productId){
+      setOpenModalProduct(true)
+    }
+  }, [])
+
+  const handleScroll = ({ nativeEvent }: any) => {
+    const y = nativeEvent.contentOffset.y
+    const height = nativeEvent.contentSize.height
+    const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
+    if (y + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
+      getNextProducts()
+      showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+    }
+  }
+
+  return (
+    <>
+      <BusinessProductsListingContainer
+        style={styles.mainContainer}
+        isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
+        onScroll={(e: any) => handleScroll(e)}
+      >
+        <WrapHeader>
+          {!loading && business?.id && (
+            <TopHeader>
+              {!isOpenSearchBar && (
+                <>
+                  <View style={{ ...styles.headerItem, flex: 1 }}>
+                    <OButton
+                      imgLeftSrc={theme.images.general.arrow_left}
+                      imgRightSrc={null}
+                      style={styles.btnBackArrow}
+                      onClick={() => (navigation?.canGoBack() && navigation.goBack()) || (auth && navigation.navigate('BottomTab'))}
+                      imgLeftStyle={{ tintColor: '#fff' }}
+                    />
+                    <AddressInput
+                      onPress={() => auth
+                        ? onRedirect('AddressList', { isGoBack: true, isFromProductsList: true })
+                        : onRedirect('AddressForm', { address: orderState.options?.address })}
+                    >
+                      <OText color={theme.colors.white} numberOfLines={1}>
+                        {orderState?.options?.address?.address}
+                      </OText>
+                    </AddressInput>
+                  </View>
+                  {!errorQuantityProducts && (
+                    <View style={{ ...styles.headerItem }}>
+                      <TouchableOpacity
+                        onPress={() => setIsOpenSearchBar(true)}
+                        style={styles.searchIcon}
+                      >
+                        <MaterialIcon
+                          name='search'
+                          color={theme.colors.white}
+                          size={25}
+                        />
+                      </TouchableOpacity>
+                    </View>
+                  )}
+                </>
+              )}
+              {isOpenSearchBar && (
+                <WrapSearchBar>
+                  <SearchBar
+                    onSearch={handleChangeSearch}
+                    onCancel={() => handleCancel()}
+                    isCancelXButtonShow
+                    noBorderShow
+                    placeholder={t('SEARCH_PRODUCTS', 'Search Products')}
+                    lazyLoad={businessState?.business?.lazy_load_products_recommended}
+                  />
+                </WrapSearchBar>
+              )}
+            </TopHeader>
+          )}
+          <BusinessBasicInformation
+            businessState={businessState}
+            openBusinessInformation={openBusinessInformation}
+            header={header}
+            logo={logo}
+          />
+        </WrapHeader>
+        {!loading && business?.id && (
+          <>
+            {!(business?.categories?.length === 0) && (
+              <BusinessProductsCategories
+                categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)]}
+                categorySelected={categorySelected}
+                onClickCategory={handleChangeCategory}
+                featured={featuredProducts}
+                openBusinessInformation={openBusinessInformation}
+              />
+            )}
+            <WrapContent>
+              <BusinessProductsList
+                categories={[
+                  { id: null, name: t('ALL', 'All') },
+                  { id: 'featured', name: t('FEATURED', 'Featured') },
+                  ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)
+                ]}
+                category={categorySelected}
+                categoryState={categoryState}
+                businessId={business.id}
+                errors={errors}
+                onProductClick={onProductClick}
+                handleSearchRedirect={handleSearchRedirect}
+                featured={featuredProducts}
+                searchValue={searchValue}
+                handleClearSearch={handleChangeSearch}
+                errorQuantityProducts={errorQuantityProducts}
+                handleCancelSearch={handleCancel}
+              />
+            </WrapContent>
+          </>
+        )}
+        {loading && !error && (
+          <>
+            <BusinessProductsCategories
+              categories={[]}
+              categorySelected={categorySelected}
+              onClickCategory={handleChangeCategory}
+              featured={featuredProducts}
+              openBusinessInformation={openBusinessInformation}
+              loading={loading}
+            />
+            <WrapContent>
+              <BusinessProductsList
+                categories={[]}
+                category={categorySelected}
+                categoryState={categoryState}
+                isBusinessLoading={loading}
+                errorQuantityProducts={errorQuantityProducts}
+              />
+            </WrapContent>
+          </>
+        )}
+      </BusinessProductsListingContainer>
+      {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
+        <FloatingButton
+          btnText={
+            currentCart?.subtotal_to_calculate >= currentCart?.minimum
+              ? !openUpselling ? t('VIEW_ORDER', 'View Order') : t('LOADING', 'Loading')
+              : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+          }
+          isSecondaryBtn={currentCart?.subtotal_to_calculate < currentCart?.minimum}
+          btnLeftValueShow={currentCart?.subtotal_to_calculate >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
+          btnRightValueShow={currentCart?.subtotal_to_calculate >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
+          btnLeftValue={currentCart?.products?.length}
+          btnRightValue={parsePrice(currentCart?.total)}
+          disabled={openUpselling || currentCart?.subtotal_to_calculate < currentCart?.minimum}
+          handleClick={() => setOpenUpselling(true)}
+        />
+      )}
+      <OModal
+        open={openModalProduct || !!curProduct || (!!productModal.product && !orderState.loading)}
+        onClose={handleCloseProductModal}
+        entireModal
+        customClose
+        isAvoidKeyBoardView
+      >
+        <ProductForm
+          product={curProduct || productModal.product}
+          businessSlug={business?.slug}
+          businessId={businessId || business?.id || productModal?.product?.category?.business_id}
+          onClose={handleCloseProductModal}
+          navigation={navigation}
+          onSave={handlerProductAction}
+          setProductLogin={setProductLogin}
+          categoryId={categoryId}
+          productId={productId}
+        />
+      </OModal>
+      {openUpselling && (
+        <UpsellingProducts
+          businessId={currentCart?.business_id}
+          business={currentCart?.business}
+          cartProducts={currentCart?.products}
+          handleUpsellingPage={handleUpsellingPage}
+          openUpselling={openUpselling}
+          canOpenUpselling={canOpenUpselling}
+          setCanOpenUpselling={setCanOpenUpselling}
+        />
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+  },
+  BackIcon: {
+    paddingRight: 20,
+  },
+  headerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 15,
+    marginHorizontal: 20,
+  },
+  btnBackArrow: {
+    borderWidth: 0,
+    color: '#FFF',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    borderRadius: 24,
+    marginRight: 15,
+  },
+  searchIcon: {
+    borderWidth: 0,
+    color: '#FFF',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    borderRadius: 24,
+    padding: 15,
+    justifyContent: 'center'
+  }
+})
+
+export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
+  const businessProductslistingProps = {
+    ...props,
+    isForceSearch: Platform.OS === 'ios',
+    UIComponent: BusinessProductsListingUI
+  }
+  return (
+    <BusinessAndProductList {...businessProductslistingProps} />
+  )
+}