ordering-ui-react-native 0.12.72 → 0.12.76

package/package.json

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

package/src/components/Messages/index.tsx

@@ -118,7 +118,7 @@ const MessagesUI = (props: MessagesParams) => {
   const messageConsole = (message: any) => {
     return message.change?.attribute !== 'driver_id'
       ?
-      `${t('ORDER', 'Order')} ${message.change.attribute} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
       : message.change.new
         ?
         `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`

package/src/utils/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import {CODES} from 'ordering-components/native'
+import { useLanguage } from 'ordering-components/native'
 
 export const flatArray = (arr: any) => [].concat(...arr)
 
@@ -42,10 +43,11 @@ export const getTraduction = (key: string, t: any) => {
  * @param {string} time business delivery time
  */
 export const convertHoursToMinutes = (time: any) => {
+  const [, t] = useLanguage()
   if (!time) return '0min'
   const [hour, minute] = time.split(':')
   const result = (parseInt(hour, 10) * 60) + parseInt(minute, 10)
-  return `${result}min`
+  return `${result}${t('MIN', 'min')}`
 }
 
 export const getIconCard = (brand: string, size: number) => {

package/themes/business/index.tsx

@@ -36,6 +36,7 @@ import { UserProfileForm } from './src/components/UserProfileForm';
 import { VerifyPhone } from './src/components/VerifyPhone';
 import { DriverMap } from './src/components/DriverMap';
 import { MapViewUI as MapView } from './src/components/MapView'
+import { NewOrderNotification } from './src/components/NewOrderNotification';
 //OComponents
 import {
   OText,
@@ -74,8 +75,9 @@ export {
   LoginForm,
   LogoutButton,
   MessagesOption,
-  NotFoundSource,
   MapView,
+  NewOrderNotification,
+  NotFoundSource,
   OrderDetailsBusiness,
   OrderDetailsDelivery,
   OrderMessage,

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

@@ -59,19 +59,19 @@ export const NewOrderNotification = (props: any) => {
     setModalOpen(false)
   }
 
-  const handleNotification = useCallback((order: any) => {
+  const handleNotification = (order: any) => {
+    setModalOpen(true)
     clearInterval(soundTimeout)
     handlePlayNotificationSound()
     setNewOrderId(order.id)
-    setModalOpen(true)
-  }, [newOrderId, notificationSound, soundTimeout])
+  }
 
   useEffect(() => {
     events.on('order_added', handleNotification)
     return () => {
       events.off('order_added', handleNotification)
     }
-  }, [handleNotification])
+  }, [])
 
   const handleUpdateOrder = useCallback(async (order: any) => {
     if (order?.driver) {

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -161,7 +161,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
 
         <OText numberOfLines={2} size={20} weight="600">
           <>
-            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} `}
+            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id} `}
             {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
               <>
                 {t('IS', 'is')}{' '}

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

@@ -20,7 +20,6 @@ import {
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
-import { NewOrderNotification } from '../NewOrderNotification';
 
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import GestureRecognizer from 'react-native-swipe-gestures';
@@ -549,7 +548,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
       {/* </GestureRecognizer> */}
 
-      <NewOrderNotification />
       {openModal && (
         <OModal open={openModal} entireModal customClose>
           <ModalContainer

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

@@ -26,7 +26,7 @@ const BusinessProductsCategoriesUI = (props: any) => {
 
   const [tabLayouts, setTabLayouts] = useState<any>({});
   const [scrollOffsetX, setScrollOffsetX] = useState<any>(0);
-	const tabsRef = useRef<any>(null);
+  const tabsRef = useRef<any>(null);
 
 
   const theme = useTheme();
@@ -56,47 +56,47 @@ const BusinessProductsCategoriesUI = (props: any) => {
   const handleCategoryScroll = (category: any) => {
     setCategoryClicked(true);
     setSelectedCategoryId(`cat_${category?.id}`);
-    
-		if (!lazyLoadProductsRecommended) {
-			if (category?.id) {
-				scrollViewRef.current.scrollTo({
-					y: categoriesLayout[`cat_${category?.id}`]?.y + productListLayout?.y + 270,
-					animated: true
-				})
-			} else {
-				scrollViewRef.current.scrollTo({
-					y: productListLayout?.y - 70,
-					animated: true
-				})
-			}
-		} else {
-			handlerClickCategory(category)
-		}
-	}
 
-  
-	const handleOnLayout = (event: any, categoryId: any) => {
+    if (!lazyLoadProductsRecommended) {
+      if (category?.id) {
+        scrollViewRef.current.scrollTo({
+          y: categoriesLayout[`cat_${category?.id}`]?.y + productListLayout?.y + 270,
+          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 - 40,
-			animated: true
-		})
-	}, [selectedCategoryId, tabLayouts])
+  useEffect(() => {
+    if (!selectedCategoryId || Object.keys(tabLayouts).length === 0) return
+    tabsRef.current.scrollTo({
+      x: tabLayouts[selectedCategoryId]?.x - 40,
+      animated: true
+    })
+  }, [selectedCategoryId, tabLayouts])
 
 
   return (
-    <ScrollView ref={tabsRef} horizontal contentContainerStyle={contentStyle} 
+    <ScrollView ref={tabsRef} horizontal contentContainerStyle={contentStyle}
       style={{ ...styles.container, borderBottomWidth: loading ? 0 : 1 }} showsHorizontalScrollIndicator={false}
       onScroll={(e: any) => setScrollOffsetX(e.nativeEvent.contentOffset.x)}
-			scrollEventThrottle={16}
-      >
+      scrollEventThrottle={16}
+    >
       {loading && (
         <Placeholder Animation={Fade}>
           <View style={{ flexDirection: 'row' }}>

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

@@ -117,10 +117,8 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 				{pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
 					<LoadMore>
 						<OButton
-							bgColor={theme.colors.white}
-							textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+							textStyle={{ color: '#fff' }}
 							text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-							borderColor={theme.colors.primary}
 							onClick={loadMoreOrders}
 							style={styles.loadMoreButton}
 						/>
@@ -154,9 +152,9 @@ const styles = StyleSheet.create({
 		minWidth: 230,
 	},
 	loadMoreButton: {
-		width: 200,
-		height: 46,
+		width: '100%',
 		marginLeft: 'auto',
 		marginRight: 'auto',
+		borderRadius: 7.6
 	},
 });

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

@@ -81,6 +81,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
             <IconAntDesign
               name='close'
               color={theme.colors.textThird}
+              style={{ marginLeft: 7 }}
               size={24}
             />
           </TouchableOpacity>
@@ -115,6 +116,11 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
               </DropOption>
             </TouchableOpacity>
           ))}
+          {businessMenuList?.menus && businessMenuList?.menus.length === 0 && (
+            <View>
+              <OText>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
+            </View>
+          )}
         </MenuListWrapper>
       </OModal>
     </>

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

@@ -123,6 +123,17 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       color: '#B1BCCC',
       fontSize: 14,
       fontWeight: '500'
+    },
+    wrapperIcon: {
+      overflow: 'hidden',
+      backgroundColor: 'transparent',
+      marginBottom: 12,
+      width: 25,
+      height: 25,
+      marginStart: 7,
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 99999
     }
 	})
 
@@ -264,12 +275,13 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   return (
     <>
-      <PreOrderContainer>
+      <PreOrderContainer contentContainerStyle={{ paddingVertical: 30, paddingHorizontal: 40 }}>
         <TouchableOpacity onPress={() => goToBack && goToBack()} style={{ marginBottom: 12 }}>
           <IconAntDesign
             name='close'
             color={theme.colors.textThird}
             size={24}
+            style={{ marginLeft: -4}}
           />
         </TouchableOpacity>
         <BusinessInfoWrapper>
@@ -350,7 +362,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             {t('ORDER_TIME', 'Order time')}
           </OText>
           <View style={{ flex: 1 }}>
-            {selectDate && datesWhitelist[0].start !== null && (
+            {selectDate && datesWhitelist[0]?.start !== null && (
               <CalendarStrip
                 scrollable
                 style={styles.calendar}
@@ -398,7 +410,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
           textStyle={{color: 'white'}}
-          style={{borderRadius: 7.6, marginBottom: 50, marginTop: 30}}
+          style={{borderRadius: 7.6, marginBottom: 20, marginTop: 30}}
           onClick={() => handleClickBusiness()}
         />
       </PreOrderContainer>
@@ -409,8 +421,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         customClose
         entireModal
       >
-        <PreorderTypeListWrapper>
-          <TouchableOpacity onPress={() => setIsPreorderTypeList(false)} style={{ marginBottom: 12 }}>
+        <PreorderTypeListWrapper contentContainerStyle={{ paddingVertical: 20, paddingHorizontal: 40}}>
+          <TouchableOpacity onPress={() => setIsPreorderTypeList(false)} style={styles.wrapperIcon}>
             <IconAntDesign
               name='close'
               color={theme.colors.textThird}
@@ -421,6 +433,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             <TouchableOpacity
               key={index}
               onPress={() => handleClickPreorderType(option)}
+              style={{ zIndex: 99999 }}
             >
               <DropOption
                 numberOfLines={1}

package/themes/original/src/components/BusinessPreorder/styles.tsx

@@ -1,8 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
-export const PreOrderContainer = styled.ScrollView`
-  padding: 20px 40px 30px 40px;
-`
+export const PreOrderContainer = styled.ScrollView``
 
 export const BusinessInfoWrapper = styled.View`
   flex-direction: row;
@@ -45,9 +43,7 @@ export const TimeItem = styled.View`
   `}
 `
 
-export const PreorderTypeListWrapper = styled.ScrollView`
-  padding: 20px 40px 30px 40px;
-`
+export const PreorderTypeListWrapper = styled.ScrollView``
 
 export const DropOption = styled.View`
   padding: 10px;

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

@@ -18,7 +18,9 @@ const BusinessProductsCategoriesUI = (props: any) => {
 		categoriesLayout,
 		selectedCategoryId,
 		handlerClickCategory,
-		lazyLoadProductsRecommended
+		lazyLoadProductsRecommended,
+		setCategoryClicked,
+		setSelectedCategoryId
 	} = props;
 
 	const theme = useTheme();
@@ -36,9 +38,23 @@ const BusinessProductsCategoriesUI = (props: any) => {
 		featuredStyle: {
 			display: 'none',
 		},
+		tabStyle: {
+			marginTop: 10,
+			height: 4,
+			borderTopStartRadius: 4,
+			borderTopEndRadius: 4,
+			backgroundColor: theme.colors.textPrimary,
+		  },
+		  tabDeactived: {
+			marginTop: 10,
+			height: 4
+		  }
 	});
 
 	const handleCategoryScroll = (category: any) => {
+		setCategoryClicked(true);
+		setSelectedCategoryId(`cat_${category?.id}`);
+
 		if (!lazyLoadProductsRecommended) {
 			if (category?.id) {
 				scrollViewRef.current.scrollTo({
@@ -57,11 +73,11 @@ const BusinessProductsCategoriesUI = (props: any) => {
 	}
 
 	const handleOnLayout = (event: any, categoryId: any) => {
-    const _tabLayouts = { ...tabLayouts }
-    const categoryKey = 'cat_' + categoryId
-    _tabLayouts[categoryKey] = event.nativeEvent.layout
-    setTabLayouts(_tabLayouts)
-  }
+		const _tabLayouts = { ...tabLayouts }
+		const categoryKey = 'cat_' + categoryId
+		_tabLayouts[categoryKey] = event.nativeEvent.layout
+		setTabLayouts(_tabLayouts)
+	}
 
 	useEffect(() => {
 		if (!selectedCategoryId || Object.keys(tabLayouts).length === 0) return
@@ -102,39 +118,20 @@ const BusinessProductsCategoriesUI = (props: any) => {
 							{
 								borderColor:
 									(!lazyLoadProductsRecommended
-										?	(selectedCategoryId === (category.id ? `cat_${category.id}` : null))
-										:	(categorySelected?.id === category.id))
-											? theme.colors.textNormal
-											: theme.colors.border,
+										? (selectedCategoryId === (category.id ? `cat_${category.id}` : null))
+										: (categorySelected?.id === category.id))
+										? theme.colors.textNormal
+										: theme.colors.border,
 							},
 						]}
 						onLayout={(event: any) => handleOnLayout(event, category.id)}
 					>
 						<OText
-							size={
-								(!lazyLoadProductsRecommended
-									?	(selectedCategoryId === (category.id ? `cat_${category.id}` : null))
-									:	(categorySelected?.id === category.id))
-										? 14
-										: 12
-							}
-							weight={
-								(!lazyLoadProductsRecommended
-									?	(selectedCategoryId === (category.id ? `cat_${category.id}` : null))
-									:	(categorySelected?.id === category.id))
-										? '600'
-										: '400'
-							}
-							color={
-								(!lazyLoadProductsRecommended
-									?	(selectedCategoryId === (category.id ? `cat_${category.id}` : null))
-									:	(categorySelected?.id === category.id))
-										? theme.colors.textNormal
-										: theme.colors.textSecondary
-							}
-							style={{ alignSelf: 'center' }}>
+							color={selectedCategoryId === `cat_${category.id}` ? theme.colors.textPrimary : theme.colors.textSecondary}
+						>
 							{category.name}
 						</OText>
+						<View style={selectedCategoryId === `cat_${category.id}` ? styles.tabStyle : styles.tabDeactived} />
 					</Tab>
 				))}
 		</ScrollView>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { View, TouchableOpacity, StyleSheet, SafeAreaView, Platform } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import {
@@ -27,6 +27,8 @@ import {
 import { FloatingButton } from '../FloatingButton'
 import { ProductForm } from '../ProductForm'
 import { UpsellingProducts } from '../UpsellingProducts'
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Animated from 'react-native-reanimated'
 
 const PIXELS_TO_SCROLL = 1000
 
@@ -53,7 +55,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [{ auth }] = useSession()
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
-  const [ ,{showToast}] = useToast()
+	const [, { showToast }] = useToast()
+	const { top } = useSafeAreaInsets();
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -90,6 +93,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const scrollViewRef = useRef<any>(null)
 	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
 	const [productListLayout, setProductListLayout] = useState<any>(null)
+	const [isCategoryClicked, setCategoryClicked] = useState(false)
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 
@@ -131,7 +135,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	const [selectedCategoryId, setSelectedCategoryId] = useState<any>(null)
 
-	const handleScroll = ({ nativeEvent }: any) => {
+	const handlePageScroll = useCallback(({ nativeEvent }: any) => {
 		const scrollOffset = nativeEvent.contentOffset.y
 		if (businessState?.business?.lazy_load_products_recommended) {
 			const height = nativeEvent.contentSize.height
@@ -141,9 +145,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
 			}
 		} else {
-			if (!scrollOffset || !categoriesLayout || !productListLayout) return
+			if (!scrollOffset || !categoriesLayout || !productListLayout || isCategoryClicked) return
+
 			for (const key in categoriesLayout) {
 				const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
+				if (scrollOffset < 10) {
+					setSelectedCategoryId('cat_all');
+					return;
+				}
 				if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
 					if (selectedCategoryId !== key) {
 						setSelectedCategoryId(key)
@@ -151,7 +160,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				}
 			}
 		}
-	}
+	}, [isCategoryClicked, selectedCategoryId, productListLayout])
+
+	const handleTouchDrag = useCallback(() => {
+		setCategoryClicked(false);
+	  }, []);
+
 
 	useEffect(() => {
 		if (!orderState.loading) {
@@ -163,7 +177,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		<SafeAreaView
 			style={{ flex: 1 }}
 		>
-			<WrapHeader>
+			<Animated.View style={{ position: 'relative' }}>
 				<TopHeader>
 					{!isOpenSearchBar && (
 						<>
@@ -201,13 +215,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</WrapSearchBar>
 					)}
 				</TopHeader>
-			</WrapHeader>
+			</Animated.View>
 			<BusinessProductsListingContainer
 				stickyHeaderIndices={[2]}
 				style={styles.mainContainer}
 				ref={scrollViewRef}
 				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
-				onScroll={(e: any) => handleScroll(e)}
+				onScroll={handlePageScroll}
+				onScrollBeginDrag={handleTouchDrag}
 				scrollEventThrottle={16}
 			>
 				<BusinessBasicInformation
@@ -232,6 +247,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								categoriesLayout={categoriesLayout}
 								selectedCategoryId={selectedCategoryId}
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+								setSelectedCategoryId={setSelectedCategoryId}
+              	setCategoryClicked={setCategoryClicked}
 							/>
 						)}
 					</>

package/themes/original/src/components/BusinessTypeFilter/styles.tsx

@@ -5,7 +5,7 @@ export const BCContainer = styled.View`
   width: 100%;
   justify-content: flex-start;
   text-align: center;
-  min-height: 45px; 
+  min-height: 60px;
 `
 
 export const BusinessCategories = styled.View`

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

@@ -203,7 +203,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		useDefualtSessionManager: true,
 		paginationSettings: {
 			initialPage: 1,
-			pageSize: props.activeOrders || props.preOrders ? -1 : 10,
+			pageSize: 10,
 			controlType: 'infinity'
 		}
 	}

package/themes/original/src/types/index.tsx

@@ -170,7 +170,7 @@ export interface BusinessProductsListingParams {
   getNextProducts?: () => {};
 	handleChangeCategory: (value: any) => {};
 	setProductLogin?: () => {};
-	updateProductModal?: (value: any) => {}
+	updateProductModal?: (value: any) => {};
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;
@@ -193,6 +193,8 @@ export interface BusinessProductsCategoriesParams {
 	categoriesLayout?: any;
 	selectedCategoryId?: any;
 	lazyLoadProductsRecommended?: any;
+  setSelectedCategoryId?: any
+  setCategoryClicked?: any
 }
 export interface BusinessProductsListParams {
 	errors?: any;