ordering-ui-react-native 0.12.70 → 0.12.74

package/package.json

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

package/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '500px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

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/src/components/OrderDetails/OrderContentComponent.tsx

@@ -150,11 +150,11 @@ export const OrderContentComponent = (props: OrderContent) => {
           {t('CUSTOMER_DETAILS', 'Customer details')}
         </OText>
         {
-          (order?.customer?.name || order?.customer?.lastname) && (
+          (!!order?.customer?.name || !!order?.customer?.lastname) && (
             <View style={{ flexDirection: 'row' }}>
               <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
                 <View style={{ flexDirection: 'row' }}>
-                  {order?.customer?.name && (
+                  {!!order?.customer?.name && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
@@ -163,7 +163,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                       {order?.customer?.name}
                     </OText>
                   )}
-                  {order?.customer?.middle_name && (
+                  {!!order?.customer?.middle_name && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
@@ -172,7 +172,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                       {order?.customer?.middle_name}
                     </OText>
                   )}
-                  {order?.customer?.lastname && (
+                  {!!order?.customer?.lastname && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
@@ -182,7 +182,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     </OText>
                   )}
                   {
-                    order?.customer?.second_lastname && (
+                    !!order?.customer?.second_lastname && (
                       <OText
                         numberOfLines={1}
                         mBottom={4}
@@ -193,7 +193,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )
                   }
                 </View>
-                {order?.user_review?.qualification && (
+                {!!order?.user_review?.qualification && (
                   <View style={{ flexDirection: 'row' }}>
                     <MaterialIcon style={{ bottom: 2 }} name='star' size={24} color={theme.colors.arrowColor} />
                     <OText mLeft={5}>
@@ -440,7 +440,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {parsePrice(order?.summary?.total ?? 0)}
             </OText>
           </Table>
-          {order?.comment && (
+          {!!order?.comment && (
             <Table>
               <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
               <OText style={{ maxWidth: '70%' }}>

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/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/instacart/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '500px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

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/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;

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

@@ -73,8 +73,9 @@ const AccountUI = (props: AccountParams) => {
         console.log('ImagePicker Error: ', response.errorMessage);
         showToast(ToastType.Error, response.errorMessage);
       } else {
-        if (response.uri) {
-          const url = `data:${response.type};base64,${response.base64}`
+        if (response?.assets?.[0]?.uri) {
+          const image = response?.assets?.[0]
+          const url = `data:${image?.type};base64,${image?.base64}`;
           handleButtonUpdateClick(null, true, url);
         } else {
           showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));

package/themes/uber-eats/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '500px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

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

@@ -300,14 +300,6 @@ const AddressListUI = (props: AddressListParams) => {
               />
             </>
           )}
-          {!isFromProfile && addressList?.addresses?.length > 0 && (
-            <OButton
-              text={t('CONTINUE', 'Continue')}
-              style={styles.button}
-              onClick={() => onNavigatorRedirect()}
-              textStyle={{ color: theme.colors.white }}
-            />
-          )}
         </AddressListContainer>
       )}
     </Container>

package/themes/uber-eats/src/layouts/Container.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
-import styled from 'styled-components/native';
+import { Platform } from 'react-native';
+import styled, { css } from 'styled-components/native';
 
 const ContainerStyled = styled.ScrollView`
   flex: 1;
+  ${(props: any) => !props.nopadding && css`
+    padding: ${Platform.OS === 'ios' ? '0px 30px 0px' : '30px'};
+  `}
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
 
 const SafeAreaStyled = styled.SafeAreaView`
@@ -10,19 +15,13 @@ const SafeAreaStyled = styled.SafeAreaView`
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
 
-const ContentView = styled.View`
-  padding-horizontal: 30px;
-`
-
 
 export const Container = (props: any) => {
   return (
     <SafeAreaStyled>
-      <ContainerStyled ref={props?.forwardRef} keyboardShouldPersistTaps='handled'>
-        <ContentView>
+      <ContainerStyled ref={props?.forwardRef} style={props?.style} {...props} keyboardShouldPersistTaps='handled'>
           {props.children}
-        </ContentView>
       </ContainerStyled>
     </SafeAreaStyled>
   )
-}
+}