ordering-ui-react-native 0.12.21 → 0.12.25

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

@@ -5,9 +5,9 @@ import { launchImageLibrary } from 'react-native-image-picker'
 import { GiftedChat, Actions, ActionsProps, InputToolbar, Composer, Send, Bubble, MessageImage, InputToolbarProps, ComposerProps } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { OIcon, OIconButton, OText } from '../shared'
+import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
-import { Header, TitleHeader, Wrapper } from './styles'
+import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -43,6 +43,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const theme = useTheme();
 
+	const quickMessageList = [
+    { key: 'customer_message_1', text: t('CUSTOMER_MESSAGE_1', 'Lorem ipsum 1') },
+    { key: 'customer_message_2', text: t('CUSTOMER_MESSAGE_2', 'Lorem ipsum 2') },
+    { key: 'customer_message_3', text: t('CUSTOMER_MESSAGE_3', 'Lorem ipsum 3') },
+    { key: 'customer_message_4', text: t('CUSTOMER_MESSAGE_4', 'Lorem ipsum 4') }
+  ]
+
+  const handleClickQuickMessage = (text: string) => {
+    setMessage && setMessage(`${message}${text}`)
+  }
+
 	const onChangeMessage = (val: string) => {
 		setMessage && setMessage(val)
 	}
@@ -227,13 +238,48 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	}
 
+	const renderAccessory = () => {
+    return (
+      <QuickMessageContainer
+        style={{
+          marginLeft: 10,
+          marginBottom: 10
+        }}
+        contentContainerStyle={{
+          alignItems: 'center',
+        }}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        {quickMessageList.map((quickMessage, i) => (
+          <OButton
+            key={i}
+            text={quickMessage.text}
+            bgColor='#E9ECEF'
+            borderColor='#E9ECEF'
+            imgRightSrc={null}
+            textStyle={{
+              fontSize: 11,
+              lineHeight: 16,
+              color: '#414954'
+            }}
+            style={{ ...styles.editButton }}
+            onClick={() => handleClickQuickMessage(quickMessage.text)}
+          />
+        ))}
+      </QuickMessageContainer>
+    )
+  }
+
 	const renderInputToolbar = (props: typeof InputToolbarProps) => (
 		<InputToolbar
 			{...props}
 			containerStyle={{
-				padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10
+				padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+				flexDirection: 'column-reverse'
 			}}
 			primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
+			renderAccessory={() => renderAccessory()}
 		/>
 	)
 
@@ -385,8 +431,9 @@ const MessagesUI = (props: MessagesParams) => {
 					renderMessageImage={renderMessageImage}
 					scrollToBottomComponent={() => renderScrollToBottomComponent()}
 					messagesContainerStyle={{
-						paddingVertical: 18,
+						paddingTop: 18,
 						paddingHorizontal: 28,
+						paddingBottom: 55
 					}}
 					isLoadingEarlier={messages.loading}
 					renderLoading={() => <ActivityIndicator size="small" color="#000" />}
@@ -412,7 +459,16 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		marginHorizontal: 4
-	}
+	},
+  editButton : {
+    borderRadius: 50,
+    backgroundColor: '#E9ECEF',
+    marginRight: 10,
+    height: 24,
+    borderWidth: 1,
+    paddingLeft: 0,
+    paddingRight: 0
+  }
 })
 
 export const Messages = (props: MessagesParams) => {

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

@@ -14,6 +14,6 @@ export const Header = styled.View`
   padding-horizontal: 20px;
 `
 
-export const TitleHeader = styled.View`
+export const TitleHeader = styled.View``
 
-`
+export const QuickMessageContainer = styled.ScrollView``

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -120,13 +120,13 @@ export const ProductOptionsUI = (props: any) => {
 			height: 258,
 		},
 		swiperButton: {
-			marginHorizontal: 30,
+			marginHorizontal: 25,
 			alignItems: 'center',
 			justifyContent: 'center',
 			width: 32,
 			height: 32,
 			borderRadius: 16,
-			backgroundColor: 'rgba(255,255,255,0.3)'
+			backgroundColor: 'rgba(208,208,208,0.5)'
 		}
 	});
 
@@ -142,6 +142,8 @@ export const ProductOptionsUI = (props: any) => {
 	const { height } = useWindowDimensions();
 	const [selOpt, setSelectedOpt] = useState(0);
 
+	const swiperRef: any = useRef(null)
+
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
 		if (errors[`id:${id}`]) {
@@ -175,9 +177,17 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleChangeMainIndex = (index: number) => {
+		if (index < 0 || index > gallery.length - 1) {
+			setThumbsSwiper(0)
+			return
+		}
 		setThumbsSwiper(index)
 	}
 
+	const handleClickThumb = (index: number) => {
+		swiperRef?.current.scrollBy(index - thumbsSwiper, true);
+	}
+
 	const handleRedirectLogin = () => {
 		onClose();
 		navigation.navigate('Login');
@@ -186,8 +196,10 @@ export const ProductOptionsUI = (props: any) => {
 	useEffect(() => {
 		const productImgList: any = []
 		product?.images && productImgList.push(product.images)
-		for (const img of product?.gallery) {
-			productImgList.push(img.file)
+		if(product?.gallery && product?.gallery.length > 0) {
+			for (const img of product?.gallery) {
+				productImgList.push(img.file)
+			}
 		}
 		setGallery(productImgList)
 	}, [product])
@@ -273,9 +285,10 @@ export const ProductOptionsUI = (props: any) => {
 								<>
 									<Swiper
 										loop={false}
+										ref={swiperRef}
 										showsButtons={true}
 										style={styles.mainSwiper}
-										// index={thumbsSwiper}
+										showsPagination={false}
 										onIndexChanged={(index) => handleChangeMainIndex(index)}
 										prevButton={
 											<View style={styles.swiperButton}>
@@ -321,29 +334,32 @@ export const ProductOptionsUI = (props: any) => {
 										}}
 									>
 										{gallery.length > 0 && gallery.map((img, index) => (
-											<View
+											<TouchableOpacity
 												key={index}
-												style={{
-													height: 56,
-													borderRadius: 8,
-													margin: 8,
-													opacity: index === thumbsSwiper ? 1 : 0.8
-												}}
+												onPress={() => handleClickThumb(index)}
 											>
-												<OIcon
-													url={img}
+												<View
 													style={{
-														borderColor: theme.colors.lightGray,
+														height: 56,
 														borderRadius: 8,
-														minHeight: '100%'
+														margin: 8,
+														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
-													width={56}
-													height={56}
-													cover
-												/>
-												{/* {thumbsSwiper === 2 && <OText color='red'>{index.toString()}</OText>}
-												{thumbsSwiper === 3 && <OText color='red'>{index.toString()}</OText>} */}
-											</View>
+												>
+													<OIcon
+														url={img}
+														style={{
+															borderColor: theme.colors.lightGray,
+															borderRadius: 8,
+															minHeight: '100%'
+														}}
+														width={56}
+														height={56}
+														cover
+													/>
+												</View>
+											</TouchableOpacity>
+
 										))}
 									</ScrollView>
 								</>

package/themes/single-business/index.tsx

@@ -45,6 +45,8 @@ import { OrderDetails } from './src/components/OrderDetails';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderSummary } from './src/components/OrderSummary';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { OrdersListing } from './src/components/OrdersListing';
+import { OrderListOption } from './src/components/OrderListOption';
 import { PaymentOptionCash } from './src/components/PaymentOptionCash';
 import { PaymentOptions } from './src/components/PaymentOptions';
 import { PaymentOptionStripe } from './src/components/PaymentOptionStripe';
@@ -125,6 +127,8 @@ export {
 	HelpOrder,
 	HelpAccountAndPayment,
 	OrderTypeSelector,
+	OrdersListing,
+	OrderListOption,
 	Notifications,
   BottomWrapper,
   BusinessBasicInformation,

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

@@ -257,7 +257,7 @@ const AddressListUI = (props: AddressListParams) => {
 							{!(
 								route && (route?.params?.isFromBusinesses || route?.params?.isFromCheckout)
 							) && !isProfile && (
-									<OText size={24}>
+									<OText size={20} style={{ marginTop: 20 }}>
 										{t('WHERE_DELIVER_NOW', 'Where do we deliver you?')}
 									</OText>
 								)}
@@ -320,7 +320,7 @@ const styles = StyleSheet.create({
 		position: 'absolute',
 	},
 	button: {
-		marginTop: 30,
+		marginTop: 20,
 		marginBottom: 0,
 		borderRadius: 7.6,
 		borderWidth: 1,

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { BusinessProductsCategories as ProductsCategories } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, StyleSheet, View, Dimensions } from 'react-native';
 import { Tab } from './styles';
 import { OText } from '../shared';
 import { BusinessProductsCategoriesParams } from '../../types';
@@ -11,28 +11,79 @@ const BusinessProductsCategoriesUI = (props: any) => {
 	const {
 		featured,
 		categories,
-		handlerClickCategory,
 		categorySelected,
 		loading,
+		scrollViewRef,
+		productListLayout,
+		categoriesLayout,
+		selectedCategoryId,
+    setSelectedCategoryId,
+		handlerClickCategory,
+		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: {
-			paddingVertical: 14,
+			paddingVertical: 5,
 			borderColor: theme.colors.clear,
+			backgroundColor: '#FFF'
 		},
 		featuredStyle: {
 			display: 'none',
 		},
 	});
 
+	const handleCategoryScroll = (category: any) => {
+		if (!lazyLoadProductsRecommended) {
+			if (category?.id || category.name === 'All') {
+				scrollViewRef.current.scrollTo({
+					y: categoriesLayout[`cat_${category?.id ?? category?.name}`]?.y + productListLayout?.y - 120,
+					animated: true
+				})
+			} else {
+				scrollViewRef.current.scrollTo({
+					y: productListLayout?.y - 120,
+					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])
+
+  const initialCategory = featured ? 0 : 1
+
 	return (
 		<ScrollView
+			ref={tabsRef}
 			horizontal
 			style={{ ...styles.container, borderBottomWidth: loading ? 0 : 1 }}
 			contentContainerStyle={{ paddingHorizontal: 40 }}
-			showsHorizontalScrollIndicator={false}>
+			showsHorizontalScrollIndicator={false}
+			onScroll={(e: any) => setScrollOffsetX(e.nativeEvent.contentOffset.x)}
+			scrollEventThrottle={16}
+		>
 			{loading && (
 				<Placeholder Animation={Fade}>
 					<View style={{ flexDirection: 'row' }}>
@@ -45,26 +96,44 @@ const BusinessProductsCategoriesUI = (props: any) => {
 			{!loading &&
 				categories &&
 				categories.length &&
-				categories.map((category: any) => (
+				categories.map((category: any, i: number) => (
 					<Tab
 						key={category.name}
-						onPress={() => handlerClickCategory(category)}
+						onPress={() => handleCategoryScroll(category)}
 						style={[
 							category.id === 'featured' && !featured && styles.featuredStyle,
 							{
 								borderColor:
-									categorySelected?.id === category.id
-										? theme.colors.textNormal
-										: theme.colors.border,
+									(!lazyLoadProductsRecommended
+										?	(selectedCategoryId === (`cat_${category.id}`) || (i === initialCategory && selectedCategoryId === null))
+										:	(categorySelected?.id === category.id))
+											? theme.colors.textNormal
+											: theme.colors.border,
 							},
-						]}>
+						]}
+						onLayout={(event: any) => handleOnLayout(event, category.id)}
+					>
 						<OText
-							size={categorySelected?.id === category.id ? 14 : 12}
-							weight={categorySelected?.id === category.id ? '600' : '400'}
+							size={
+								(!lazyLoadProductsRecommended
+									?	(selectedCategoryId === (`cat_${category.id}`) || (i === initialCategory && selectedCategoryId === null))
+									:	(categorySelected?.id === category.id))
+										? 14
+										: 12
+							}
+							weight={
+								(!lazyLoadProductsRecommended
+									?	(selectedCategoryId === (`cat_${category.id}`) || (i === initialCategory && selectedCategoryId === null))
+									:	(categorySelected?.id === category.id))
+										? '600'
+										: '400'
+							}
 							color={
-								categorySelected?.id === category.id
-									? theme.colors.textNormal
-									: theme.colors.textSecondary
+								(!lazyLoadProductsRecommended
+									?	(selectedCategoryId === (`cat_${category.id}`) || (i === initialCategory && selectedCategoryId === null))
+									:	(categorySelected?.id === category.id))
+										? theme.colors.textNormal
+										: theme.colors.textSecondary
 							}
 							style={{ alignSelf: 'center' }}>
 							{category.name}
@@ -78,8 +147,12 @@ const BusinessProductsCategoriesUI = (props: any) => {
 export const BusinessProductsCategories = (
 	props: BusinessProductsCategoriesParams,
 ) => {
+  const categoriesToSend = !props.lazyLoadProductsRecommended
+    ? props.categories.filter((category: any) => category.id)
+    : props.categories
 	const businessProductsCategoriesProps = {
 		...props,
+    categories: categoriesToSend,
 		UIComponent: BusinessProductsCategoriesUI,
 	};
 

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

@@ -24,11 +24,20 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleClearSearch,
     errorQuantityProducts,
     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>
       {category.id &&
@@ -45,16 +54,18 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       {!category.id &&
         featured &&
         categoryState?.products?.find((product: any) => product.featured) && (
-          <>
+          <View
+            onLayout={(event: any) => handleOnLayout(event, 'featured')}
+          >
             <OText size={16} weight={'600'} mBottom={15}>
               {t('FEATURED', 'Featured')}
             </OText>
             <>
               {categoryState.products?.map(
-                (product: any) =>
+                (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
-                      key={product.id}
+                      key={i}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
                       businessId={businessId}
@@ -63,7 +74,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   ),
               )}
             </>
-          </>
+          </View>
         )}
 
       {!category.id &&
@@ -79,7 +90,10 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               <React.Fragment key={'cat_' + category.id}>
                 {products.length > 0 && (
                   <>
-                    <View style={bpStyles.catWrap}>
+                    <View
+                      style={bpStyles.catWrap}
+        							onLayout={(event: any) => handleOnLayout(event, category?.id)}
+                    >
                       <View style={bpStyles.catIcon}>
                         <OIcon
                           url={optimizeImage(category.image, 'h_100,c_limit')}
@@ -88,14 +102,14 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           style={{ borderRadius: 7.6 }}
                         />
                       </View>
-                      <OText size={16} weight={'600'}>
+                      <OText size={16} weight="600">
                         {category.name}
                       </OText>
                     </View>
                     <>
-                      {products.map((product: any) => (
+                      {products.map((product: any, i: any) => (
                         <SingleProductCard
-                          key={product.id}
+                          key={i}
                           isSoldOut={product.inventoried && !product.quantity}
                           businessId={businessId}
                           product={product}

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

@@ -11,4 +11,4 @@ export const ErrorMessage = styled.View`
 
 export const WrapperNotFound = styled.View`
   height: 500px;
-`
+`