ordering-ui-react-native 0.12.5 → 0.12.9

package/themes/single-business/src/components/PromotionCard/index.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { StyleSheet, ImageBackground } from 'react-native'
+import { useUtils } from 'ordering-components/native'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native'
+import { OText } from '../shared'
+
+import {
+  CardContainer,
+  WrapImage,
+  WrapContent,
+  LineDivider
+} from './styles'
+
+export const PromotionCard = (props: any) => {
+  const {
+    promotion,
+    isLoading,
+    onPromotionClick,
+  } = props
+
+  const theme = useTheme();
+  const [{ optimizeImage, parseDate }] = useUtils();
+
+  return (
+    <>
+      <CardContainer
+        style={{ width: '100%' }}
+        onPress={() => onPromotionClick && onPromotionClick(promotion)}
+      >
+        <WrapImage>
+          {isLoading ? (
+            <PlaceholderLine
+              width={100}
+              height={80}
+              style={{borderRadius: 10}}
+            />
+          ) : (
+            <ImageBackground
+              style={styles.image}
+              source={promotion.image
+                ? { uri: optimizeImage(promotion?.image, 'h_200,c_limit') }
+                : theme.images.dummies.promotion
+              }
+              imageStyle={{ borderRadius: 10 }}
+              resizeMode='cover'
+            />
+          )}
+        </WrapImage>
+        <WrapContent>
+          {isLoading ? (
+            <Placeholder>
+              <PlaceholderLine width={40} style={{ marginTop: 5 }} />
+              <PlaceholderLine width={80} />
+              <PlaceholderLine width={30} />
+            </Placeholder>
+          ) : (
+            <>
+              <OText
+                size={16}
+                numberOfLines={1}
+                ellipsizeMode='tail'
+                style={styles.textStyle}
+              >
+                {promotion?.name}
+              </OText>
+              {!!promotion?.description && (
+                <OText
+                  color={theme.colors.lightGray}
+                  size={16}
+                  numberOfLines={3}
+                  ellipsizeMode='tail'
+                  style={styles.textStyle}
+                >
+                  {promotion?.description}
+                </OText>
+              )}
+              <OText
+                size={16}
+                numberOfLines={1}
+                ellipsizeMode='tail'
+                style={styles.textStyle}
+              >
+                {`Expires ${parseDate(promotion?.end)}`}
+              </OText>
+            </>
+          )}
+        </WrapContent>
+      </CardContainer>
+      <LineDivider />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  textStyle: {
+    // marginTop: 10,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  }
+})

package/themes/single-business/src/components/PromotionCard/styles.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const CardContainer = styled.TouchableOpacity`
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: 10px;
+  position: relative;
+  margin-bottom: 20px;
+  padding: 10px 0 0;
+  align-self: flex-start;
+`
+
+export const LineDivider = styled.View`
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  margin-bottom: 10px;
+`
+
+export const WrapImage = styled.View`
+  width: 75px;
+  height: 75px;
+`
+
+export const WrapContent = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+`

package/themes/single-business/src/components/Promotions/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { View, ScrollView, useWindowDimensions } from 'react-native';
+import { PromotionsController, useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+
+import { OText, OButton } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
+import { PromotionCard } from '../PromotionCard'
+import { Container } from './styles'
+
+const PromotionsUI = (props: any) => {
+  const { offersState, loadMoreOffers } = props
+
+  const [, t] = useLanguage();
+  const theme = useTheme();
+  const { height } = useWindowDimensions();
+
+  return (
+    <Container>
+      <OText size={20} mBottom={20} style={{ marginTop: 20 }}>
+        {t('PROMOTIONS', 'Promotions')}
+      </OText>
+
+      {!offersState?.error && (
+        <>
+          <ScrollView style={{ paddingBottom: 20 }}>
+            {offersState?.offers?.length > 0 && offersState?.offers?.map((offer: any) => (
+              <PromotionCard
+                key={offer.id}
+                promotion={offer}
+              />
+            ))}
+            {offersState?.loading && (
+              <ScrollView>
+                {[...Array(8)].map((_, i) => (
+                  <PromotionCard
+                    key={i}
+                    isLoading
+                  />
+                ))}
+              </ScrollView>
+            )}
+            {offersState?.pagination?.totalPages && offersState?.pagination?.currentPage < offersState?.pagination?.totalPages && (
+              <View>
+                <OButton
+                  onClick={loadMoreOffers}
+                  text={t('LOAD_MORE_PROMOTIONS', 'Load more promotions')}
+                  imgRightSrc={null}
+                  textStyle={{ color: theme.colors.white }}
+                  style={{ borderRadius: 8, shadowOpacity: 0, marginTop: 20 }}
+                />
+              </View>
+            )}
+          </ScrollView>
+        </>
+      )}
+
+      {(offersState?.error || offersState?.offers?.length === 0) && !offersState?.loading && (
+        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
+          <NotFoundSource
+            content={offersState?.error
+              ? offersState?.error[0]
+              : t('NO_PROMOTIONS_FOUND', 'Sorry, no promotions found')}
+            image={theme.images.general.notFound}
+          />
+        </View>
+      )}
+    </Container>
+  )
+}
+
+export const Promotions = (props: any) => {
+  const promotionsProps = {
+    ...props,
+    UIComponent: PromotionsUI,
+  };
+  return <PromotionsController {...promotionsProps} />;
+};

package/themes/single-business/src/components/Promotions/styles.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View``

package/themes/single-business/src/components/UpsellingProducts/styles.tsx

@@ -7,6 +7,7 @@ export const Container = styled.View`
 `
 export const UpsellingContainer = styled.ScrollView`
   max-height: 92px;
+  margin-right: 40px;
 `
 export const Item = styled.View`
   border-width: 1px;
@@ -47,4 +48,4 @@ export const TopBar = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 44px;
 	justify-content: center;
-`;
+`;

package/themes/uber-eats/src/components/BusinessController/index.tsx

@@ -194,7 +194,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 export const BusinessController = (props: BusinessControllerParams) => {
   const BusinessControllerProps = {
     ...props,
-    UIComponent: BusinessControllerUI,
+    UIComponent: BusinessControllerUI
   };
 
   return <BusinessSingleCard {...BusinessControllerProps} />;

package/themes/uber-eats/src/components/BusinessProductsCategories/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { BusinessProductsCategories as ProductsCategories } from 'ordering-components/native'
-import { ScrollView, StyleSheet, View, I18nManager, Platform } from 'react-native'
+import { ScrollView, StyleSheet, View, I18nManager, Platform, Dimensions } from 'react-native'
 import { Tab } from './styles'
 import { OText } from '../shared'
 import { BusinessProductsCategoriesParams } from '../../types'
@@ -13,11 +13,22 @@ const BusinessProductsCategoriesUI = (props: any) => {
     categories,
     handlerClickCategory,
     categorySelected,
-    loading
+    loading,
+
+    scrollViewRef,
+    productListLayout,
+    categoriesLayout,
+		selectedCategoryId,
+    lazyLoadProductsRecommended
   } = props
 
   const theme = useTheme()
 
+  const windowWidth = Dimensions.get('window').width
+	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [scrollOffsetX, setScrollOffsetX] = useState<any>(0)
+	const tabsRef = useRef<any>(null)
+
   const styles = StyleSheet.create({
     container: {
       paddingHorizontal: I18nManager.isRTL && Platform.OS === 'android' ? 0 : 20,
@@ -31,8 +42,48 @@ const BusinessProductsCategoriesUI = (props: any) => {
     }
   })
 
+  const handleCategoryScroll = (category: any) => {
+		if (!lazyLoadProductsRecommended) {
+			if (category?.id) {
+				scrollViewRef.current.scrollTo({
+					y: categoriesLayout[`cat_${category?.id}`]?.y + productListLayout?.y - 40,
+					animated: true
+				})
+			} else {
+				scrollViewRef.current.scrollTo({
+					y: productListLayout?.y - 70,
+					animated: true
+				})
+			}
+		} else {
+			handlerClickCategory(category)
+		}
+	}
+
+	const handleOnLayout = (event: any, categoryId: any) => {
+    const _tabLayouts = { ...tabLayouts }
+    const categoryKey = 'cat_' + categoryId
+    _tabLayouts[categoryKey] = event.nativeEvent.layout
+    setTabLayouts(_tabLayouts)
+  }
+
+	useEffect(() => {
+		if (!selectedCategoryId || Object.keys(tabLayouts).length === 0) return
+		tabsRef.current.scrollTo({
+			x: tabLayouts[selectedCategoryId]?.x,
+			animated: true
+		})
+	}, [selectedCategoryId, tabLayouts])
+
   return (
-    <ScrollView horizontal style={{...styles.container, borderBottomWidth: loading ? 0 : 1}} showsHorizontalScrollIndicator={false}>
+    <ScrollView
+			ref={tabsRef}
+      horizontal
+      style={{...styles.container, borderBottomWidth: loading ? 0 : 1}}
+      showsHorizontalScrollIndicator={false}
+      onScroll={(e: any) => setScrollOffsetX(e.nativeEvent.contentOffset.x)}
+			scrollEventThrottle={16}
+    >
       {loading && (
         <Placeholder Animation={Fade}>
           <View style={{ flexDirection: 'row' }}>
@@ -45,13 +96,30 @@ const BusinessProductsCategoriesUI = (props: any) => {
       {
         !loading && categories && categories.length && categories.map((category: any) => (
           <Tab
-          key={category.name}
-          onPress={() => handlerClickCategory(category)}
-          style={(category.id === 'featured') && !featured && styles.featuredStyle}
+            key={category.name}
+            onPress={() => handleCategoryScroll(category)}
+            style={[
+							category.id === 'featured' && !featured && styles.featuredStyle,
+							{
+								borderColor:
+									(!lazyLoadProductsRecommended
+										?	(selectedCategoryId === (category.id ? `cat_${category.id}` : null))
+										:	(categorySelected?.id === category.id))
+											? theme.colors.secundary
+											: theme.colors.primary
+							},
+						]}
+						onLayout={(event: any) => handleOnLayout(event, category.id)}
           >
             <OText
-              color={categorySelected?.id === category.id ? theme.colors.primary : ''}
-              >
+              color={
+								(!lazyLoadProductsRecommended
+									?	(selectedCategoryId === (category.id ? `cat_${category.id}` : null))
+									:	(categorySelected?.id === category.id))
+										? theme.colors.secundary
+										: theme.colors.primary
+							}
+            >
               {category.name}
             </OText>
           </Tab>

package/themes/uber-eats/src/components/BusinessProductsList/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import { ProductsList, useLanguage } from 'ordering-components/native'
+import { ProductsList, useLanguage, useUtils } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { NotFoundSource } from '../NotFoundSource'
 import { BusinessProductsListParams } from '../../types'
-import { OText } from '../shared'
+import { OIcon, OText } from '../shared'
 import {
   ProductsContainer,
   ErrorMessage,
   WrapperNotFound
 } from './styles'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { View } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -26,10 +26,21 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleSearchRedirect,
     handleClearSearch,
     errorQuantityProducts,
-    handleCancelSearch
+    handleCancelSearch,
+
+    categoriesLayout,
+    setCategoriesLayout
   } = props
 
   const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const handleOnLayout = (event: any, categoryId: any) => {
+    const _categoriesLayout = { ...categoriesLayout }
+    const categoryKey = 'cat_' + categoryId
+    _categoriesLayout[categoryKey] = event.nativeEvent.layout
+    setCategoriesLayout(_categoriesLayout)
+  }
 
   return (
     <ProductsContainer>
@@ -48,8 +59,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       {
         !category.id && (
           featured && categoryState?.products?.find((product: any) => product.featured) && (
-            <>
-              <OText size={18} weight='bold' mBottom={10} style={{ textAlign: 'left' }}>{t('FEATURED', 'Featured')}</OText>
+            <View
+              onLayout={(event: any) => handleOnLayout(event, 'featured')}
+            >
+              <OText size={18} weight='bold' mBottom={10} style={{ textAlign: 'left' }}>
+                {t('FEATURED', 'Featured')}
+              </OText>
               <>
                 {categoryState.products?.map((product: any) => product.featured && (
                   <SingleProductCard
@@ -61,7 +76,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   />
                 ))}
               </>
-            </>
+            </View>
           )
         )
       }
@@ -70,11 +85,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !category.id && categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
           const products = categoryState.products?.filter((product: any) => product.category_id === category.id) || []
           return (
-            <View key={category.id} style={{alignItems: 'flex-start'}}>
+            <React.Fragment key={'cat_' + category.id}>
               {
                 products.length > 0 && (
                   <>
-                    <OText size={18} weight='600' mBottom={10} style={{ textAlign: 'left' }}>{category.name}</OText>
+                    <View
+                      style={bpStyles.catWrap}
+                      onLayout={(event: any) => handleOnLayout(event, category.id)}
+                    >
+                      <View style={bpStyles.catIcon}>
+                        <OIcon
+                          url={optimizeImage(category.image, 'h_100,c_limit')}
+                          width={41}
+                          height={41}
+                          style={{ borderRadius: 7.6 }}
+                        />
+                      </View>
+                      <OText size={18} weight='600' style={{ textAlign: 'left' }}>{category.name}</OText>
+                    </View>
                     <>
                       {
                         products.map((product: any) => (
@@ -91,7 +119,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   </>
                 )
               }
-            </View>
+            </React.Fragment>
           )
         })
       }
@@ -137,6 +165,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   )
 }
 
+const bpStyles = StyleSheet.create({
+  catWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 41,
+    marginTop: 20,
+    marginBottom: 10
+  },
+  catIcon: {
+    borderRadius: 7.6,
+    shadowColor: '#000000',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 0 },
+    shadowRadius: 1,
+    marginEnd: 13,
+  },
+});
+
 export const BusinessProductsList = (props: BusinessProductsListParams) => {
   const businessProductsListProps = {
     ...props,

package/themes/uber-eats/src/components/BusinessProductsListing/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { View, TouchableOpacity, StyleSheet } from 'react-native'
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
@@ -8,7 +8,9 @@ import {
   useOrder,
   useSession,
   useUtils,
-  useConfig
+  useConfig,
+  ToastType,
+	useToast
 } from 'ordering-components/native'
 import { OModal, OText } from '../shared'
 import { OBottomPopup } from '../shared'
@@ -37,6 +39,8 @@ import {
   WrapBusinesssProductsCategories
 } from './styles'
 
+const PIXELS_TO_SCROLL = 1000
+
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const {
     navigation,
@@ -55,7 +59,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     handleChangeCategory,
     setProductLogin,
     updateProductModal,
-    isCartOnProductsList
+    isCartOnProductsList,
+    getNextProducts
   } = props
 
   const theme = useTheme()
@@ -101,6 +106,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [orderState] = useOrder()
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
+  const [ ,{showToast}] = useToast()
 
   const { business, loading, error } = businessState
   const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
@@ -108,6 +114,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [curProduct, setCurProduct] = useState(null)
   const [isCartOpen, setIsCartOpen] = useState(false)
 	const [isStickyCategory, setStickyCategory] = useState(false)
+  const scrollViewRef = useRef<any>(null)
+	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
+	const [productListLayout, setProductListLayout] = useState<any>(null)
+	const [selectedCategoryId, setSelectedCategoryId] = useState<any>(null)
 
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
@@ -136,13 +146,32 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     handleCloseProductModal()
   }
 
-  const handlePageScroll = (event: any) => {
-		const y = event?.nativeEvent?.contentOffset?.y || 0;
-		if (y > 30 && !isStickyCategory) {
+  const handlePageScroll = ({ nativeEvent }: any) => {
+		const scrollOffset = nativeEvent?.contentOffset?.y || 0;
+		if (scrollOffset > 30 && !isStickyCategory) {
 			setStickyCategory(true);
-		} else if (y < 19 && isStickyCategory) {
+		} else if (scrollOffset < 19 && isStickyCategory) {
 			setStickyCategory(false);
 		}
+
+    if (businessState?.business?.lazy_load_products_recommended) {
+			const height = nativeEvent.contentSize.height
+			const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
+			if (scrollOffset + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
+				getNextProducts()
+				showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+			}
+		} else {
+			if (!scrollOffset || !categoriesLayout || !productListLayout) return
+			for (const key in categoriesLayout) {
+				const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
+				if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
+					if (selectedCategoryId !== key) {
+						setSelectedCategoryId(key)
+					}
+				}
+			}
+		}
 	}
 
   return (
@@ -194,7 +223,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         stickyHeaderIndices={[2]}
         style={{ ...styles.mainContainer, marginTop: isStickyCategory ? 60 : 0 }}
         isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
-        onScroll={handlePageScroll}
+				ref={scrollViewRef}
+        onScroll={(e: any) => handlePageScroll(e)}
         scrollEventThrottle={14}
       >
         <WrapHeader>
@@ -240,6 +270,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 categorySelected={categorySelected}
                 onClickCategory={handleChangeCategory}
                 featured={featuredProducts}
+
+                scrollViewRef={scrollViewRef}
+								productListLayout={productListLayout}
+								categoriesLayout={categoriesLayout}
+								selectedCategoryId={selectedCategoryId}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
               />
             )}
           </WrapBusinesssProductsCategories>
@@ -247,7 +283,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         
         {!loading && business?.id && (
           <>
-            <WrapContent>
+            <WrapContent
+							onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
+            >
               <BusinessProductsList
                 categories={[
                   { id: null, name: t('ALL', 'All') },
@@ -265,6 +303,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 handleClearSearch={handleChangeSearch}
                 errorQuantityProducts={errorQuantityProducts}
                 handleCancelSearch={handleCancel}
+
+                categoriesLayout={categoriesLayout}
+								setCategoriesLayout={setCategoriesLayout}
               />
             </WrapContent>
           </>

package/themes/uber-eats/src/components/BusinessesListing/index.tsx

@@ -25,6 +25,7 @@ import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessController } from '../BusinessController'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { MomentOption } from '../MomentOption'
+import { HighestRatedBusinesses } from '../HighestRatedBusinesses'
 import { useTheme } from 'styled-components/native'
 
 const PIXELS_TO_SCROLL = 1200
@@ -139,6 +140,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
           />
         </Search>
 
+  			<HighestRatedBusinesses onBusinessClick={handleBusinessClick} />
+        <Divider />
+
         <BusinessTypeFilter
           images={props.images}
           businessTypes={props.businessTypes}