ordering-ui-react-native 0.16.61 → 0.16.64

package/package.json

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

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

@@ -111,6 +111,13 @@ const ChatUI = (props: MessagesParams) => {
     { key: 'driver_message_4', text: t('DRIVER_MESSAGE_4', 'driver_message_4') }
   ]
 
+  const adminMessageList: any = [
+    { key: 'message_1', text: t('ADMIN_MESSAGE_1', 'admin_message_1') },
+    { key: 'message_2', text: t('ADMIN_MESSAGE_2', 'admin_message_2') },
+    { key: 'message_3', text: t('ADMIN_MESSAGE_3', 'admin_message_3') },
+    { key: 'message_4', text: t('ADMIN_MESSAGE_4', 'admin_message_4') }
+  ]
+
   const handleClickQuickMessage = (text: string) => {
     setMessage && setMessage(`${message}${text}`)
   }
@@ -426,7 +433,8 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   useEffect(() => {
-    if (user.level === 2) setMessageList(storeMessageList)
+    if (user.level === 0) setMessageList(adminMessageList)
+    else if (user.level === 2) setMessageList(storeMessageList)
     else if (user.level === 4) setMessageList(driverMessageList)
     else setMessageList([])
   }, [user])

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

@@ -88,7 +88,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     handleClickLogisticOrder,
     logisticOrders,
     loadLogisticOrders,
-    isLogisticActivated
+    isLogisticActivated,
+    isAlsea
   } = props;
 
   const defaultSearchList = {
@@ -545,7 +546,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </FiltersTab>
       <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
-        {currentTabSelected !== 'logisticOrders' && (
+        {currentTabSelected !== 'logisticOrders' && !isAlsea && (
           <View
             style={{
               display: 'flex',

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

@@ -293,7 +293,8 @@ export interface OrdersOptionParams {
   handleClickLogisticOrder: (status: number, orderId: number) => void,
   logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
   loadLogisticOrders: () => void;
-  isLogisticActivated?: boolean
+  isLogisticActivated?: boolean;
+  isAlsea?: boolean;
 }
 export interface ActiveOrdersParams {
   orders?: any;

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
 import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
@@ -46,7 +46,7 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-	const isChewLayout = theme?.layouts?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 	
 	const styles = StyleSheet.create({
@@ -218,14 +218,14 @@ export const BusinessBasicInformation = (
 							/>
 						)}
 						{!!business?.tiktok_profile && (
-							<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+							<Pressable style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
 										style={{ width: '100%', height: '100%' }}
 									/>
 								</View>
-							</TouchableOpacity>
+							</Pressable>
 						)}
 						{!!business?.pinterest_profile && (
 							<SocialNetWork
@@ -327,7 +327,7 @@ export const BusinessBasicInformation = (
 								</Placeholder>
 							) : (
 								<TitleWrapper>
-									<OText size={24} weight={'600'}>
+									<OText size={24} weight={'600'} numberOfLines={2}>
 										{business?.name}
 									</OText>
 									{business?.ribbon?.enabled && (

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

@@ -75,9 +75,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [{ configs }] = useConfig()
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
-	const isChewLayout = theme?.layouts?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-	const showBusinessNearCity = !theme?.layouts?.business_view?.components?.near_business?.hidden
+	const hideBusinessNearCity = orderingTheme?.theme?.business_view?.components?.near_business?.hidden
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -277,7 +277,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapSearchBar>
 						)}
 					</TopHeader>
-					{showBusinessNearCity && businessState?.business?.city_id && (
+					{!hideBusinessNearCity && businessState?.business?.city_id && (
 						<NearBusiness>
 							<BusinessesListing
 								logosLayout

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -80,8 +80,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const appState = useRef(AppState.currentState)
 	const searchBarRef = useRef<any>()
 	const [appStateVisible, setAppStateVisible] = useState(appState.current);
-	const isChewLayout = theme?.layouts?.header?.components?.layout?.type === 'chew'
-	const showCities = !orderingTheme?.theme?.business_listing_view?.components?.cities?.hidden
+	const isChewLayout = orderingTheme?.theme?.header?.components?.layout?.type === 'chew'
+	const hideCities = orderingTheme?.theme?.business_listing_view?.components?.cities?.hidden
 	const [refreshing] = useState(false);
 	const styles = StyleSheet.create({
 		container: {
@@ -216,6 +216,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}
 
+	const handleChangeCity = (cityId: number | null) => {
+		changeCityFilter(orderState?.options?.city_id === cityId ? null : cityId)
+		setIsOpenCities(false)
+	}
+
 	useEffect(() => {
 		if (!businessesList?.loading) {
 			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
@@ -345,11 +350,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<OText size={18} weight={700} color={theme.colors?.white}>
 							{t('WELCOME', 'Welcome')} {user?.name}!
 						</OText>
-						<TouchableOpacity
-							onPress={() => searchBarRef?.current?.focus?.()}
-						>
-							<Ionicons name='search' style={{ ...styles.iconStyle, color: theme.colors?.white }} />
-						</TouchableOpacity>
 					</View>
 				)}
 				<Search isChewLayout={isChewLayout}>
@@ -485,7 +485,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				/>
 			)}
 
-			{showCities && (
+			{!hideCities && (
 				<View style={{ marginTop: 10 }}>
 					<OButton
 						onClick={() => setIsOpenCities(true)}
@@ -654,7 +654,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								borderBottomColor: orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.backgroundGray,
 								marginBottom: 10,
 							}}
-							onPress={() => changeCityFilter(city?.id)}
+							onPress={() => handleChangeCity(city?.id)}
 							disabled={orderState?.loading}
 						>
 							<OText color={orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.black}>

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

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect } from 'react'
-import { useOrder, useSession, useLanguage } from 'ordering-components/native';
+import { useOrder, useSession, useLanguage, useOrderingTheme } from 'ordering-components/native';
 
 import { useTheme } from 'styled-components/native'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
@@ -11,7 +11,8 @@ import { ReviewTrigger } from '../ReviewTrigger';
 export const BusinessesListing = (props: any) => {
   const { logosLayout } = props
   const theme = useTheme()
-  const layout = theme?.layouts?.business_listing_view?.components?.layout?.type || 'original'
+  const [orderingTheme] = useOrderingTheme()
+  const layout = orderingTheme?.theme?.business_listing_view?.components?.layout?.type || 'original'
   const [, t] = useLanguage();
   const [{ auth }] = useSession()
   const [, { getLastOrderHasNoReview }] = useOrder();
@@ -96,4 +97,4 @@ export const BusinessesListing = (props: any) => {
       )}
     </>
   )
-}
+}

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

@@ -60,11 +60,11 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
-	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
+  const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
-  const placeSpotTypes = [3, 4]
+  const placeSpotTypes = [4]
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -99,10 +99,10 @@ const CartUI = (props: any) => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
     if (isCheckoutMultiBusinessEnabled) {
-			props.onNavigationRedirect('CheckoutNavigator', {
-				screen: 'MultiCheckout'
-			})
-		} else {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'MultiCheckout'
+      })
+    } else {
       props.onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
         cartUuid: cart?.uuid,
@@ -446,7 +446,7 @@ const CartUI = (props: any) => {
                 </OText>
               </View>
             )}
-          </>          
+          </>
         )}
       </BusinessItemAccordion>
 

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

@@ -141,9 +141,9 @@ const CheckoutUI = (props: any) => {
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
-  const [requiredFields, setRequiredFields] = useState<any>([])
+	const [requiredFields, setRequiredFields] = useState<any>([])
 
-	const placeSpotTypes = [3, 4]
+	const placeSpotTypes = [4]
 	const businessConfigs = businessDetails?.business?.configs ?? []
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
@@ -178,15 +178,15 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = (confirmPayment : any) => {
+	const handlePlaceOrder = (confirmPayment: any) => {
 		if (!userErrors.length && !requiredFields?.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
 		if (requiredFields?.length) {
-      setIsOpen(true)
-      return
-    }
+			setIsOpen(true)
+			return
+		}
 		let stringError = ''
 		Object.values(userErrors).map((item: any, i: number) => {
 			stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
@@ -646,6 +646,7 @@ const CheckoutUI = (props: any) => {
 											cart={cart}
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
+											placeSpotTypes={placeSpotTypes}
 										/>
 									</>
 								)}

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

@@ -39,7 +39,8 @@ const OrderSummaryUI = (props: any) => {
     commentState,
     handleChangeComment,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    placeSpotTypes
   } = props;
 
   const theme = useTheme()
@@ -52,7 +53,6 @@ const OrderSummaryUI = (props: any) => {
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
-  const placeSpotTypes = [3, 4]
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -304,7 +304,7 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 </View>
               )}
-              {placeSpotTypes.includes(orderState?.options?.type) && (
+              {placeSpotTypes && placeSpotTypes.includes(orderState?.options?.type) && (
                 <OSTable style={{ marginTop: 15 }}>
                   <OText size={14} lineHeight={21} weight={'600'}>
                     {t('SPOT', 'Spot')}: {cart?.place?.name || t('NO_SELECTED', 'No selected')}

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

@@ -169,7 +169,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
 	const [indexGallery, setIndexGallery] = useState(0)
-	const [selOpt, setSelectedOpt] = useState(0);
+	const [selOpt, setSelectedOpt] = useState(-1);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [playing, setPlaying] = useState(false);
 	const [qtyBy, setQtyBy] = useState({
@@ -323,6 +323,14 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
+	const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
+
+		const _topOption = Object.keys(optionLayout).find(((option: any) => Math.abs(contentOffset?.y - layoutMeasurement?.height - optionLayout[option]?.y) < 20))
+		if (_topOption) {
+			const _topOptionId = Number(_topOption.replace('id:', ''))
+		}
+	}
+
 	const handleGoBack = navigation?.canGoBack()
 		? () => navigation.goBack()
 		: () => navigation.navigate('Business', { store: props.businessSlug })
@@ -408,7 +416,7 @@ export const ProductOptionsUI = (props: any) => {
 								height: 44,
 								shadowOpacity: 0,
 								borderWidth: 1,
-								marginTop: isHaveWeight ? 10: 0
+								marginTop: isHaveWeight ? 10 : 0
 							}}
 						/>
 					)}
@@ -457,7 +465,8 @@ export const ProductOptionsUI = (props: any) => {
 				<ScrollView
 					ref={scrollViewRef}
 					contentContainerStyle={{ paddingBottom: 80 }}
-					stickyHeaderIndices={[2]}>
+					stickyHeaderIndices={[2]}
+					onScroll={handleScroll}>
 					<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
 						{loading && !product ? (
 							<View style={styles.productHeaderSkeleton}>
@@ -681,36 +690,36 @@ export const ProductOptionsUI = (props: any) => {
 							contentContainerStyle={{ paddingHorizontal: 33, backgroundColor: theme.colors.white }}
 						>
 							<TouchableOpacity
-								key={`eopt_all_0`}
-								onPress={() => setSelectedOpt(0)}
+								key={`eopt_key_00`}
+								onPress={() => setSelectedOpt(-1)}
 								style={[
 									styles.extraItem,
 									{
-										borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
+										borderBottomColor: selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
 									},
 								]}>
 								<OText
-									color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-									size={selOpt == 0 ? 14 : 12}
-									weight={selOpt == 0 ? '600' : 'normal'}>
+									color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
+									size={selOpt == -1 ? 14 : 12}
+									weight={selOpt == -1 ? '600' : 'normal'}>
 									{t('ALL', 'All')}
 								</OText>
 							</TouchableOpacity>
 							{product?.ingredients.length > 0 && (
 								<TouchableOpacity
-									key={`eopt_all_00`}
-									onPress={() => setSelectedOpt(-1)}
+									key={`eopt_key_01`}
+									onPress={() => setSelectedOpt(0)}
 									style={[
 										styles.extraItem,
 										{
 											borderBottomColor:
-												selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
+												selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
 										},
 									]}>
 									<OText
-										color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-										size={selOpt == -1 ? 14 : 12}
-										weight={selOpt == -1 ? '600' : 'normal'}>
+										color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
+										size={selOpt == 0 ? 14 : 12}
+										weight={selOpt == 0 ? '600' : 'normal'}>
 										{t('INGREDIENTS', 'Ingredients')}
 									</OText>
 								</TouchableOpacity>
@@ -760,10 +769,10 @@ export const ProductOptionsUI = (props: any) => {
 						</>
 					) : (
 						<ProductEditions>
-							{selOpt == 0 ? (
+							{selOpt === -1 ? (
 								<>
 									{product?.ingredients.length > 0 && (
-										<View style={styles.optionContainer}>
+										<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
 											<SectionTitle>
 												<OText size={16}>
 													{t('INGREDIENTS', 'Ingredients')}
@@ -845,7 +854,7 @@ export const ProductOptionsUI = (props: any) => {
 								</>
 							) : (
 								<>
-									{selOpt == -1 ? (
+									{selOpt === 0 ? (
 										<View style={styles.optionContainer}>
 											<SectionTitle>
 												<OText size={16}>
@@ -1084,6 +1093,7 @@ export const ProductOptionsUI = (props: any) => {
 export const ProductForm = (props: any) => {
 	const productOptionsProps = {
 		...props,
+		productCart: { quantity: props?.product?.minimum_per_order || 1 },
 		UIComponent: ProductOptionsUI,
 	};
 

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

@@ -5,6 +5,7 @@ import {
 	useOrder,
 	useUtils,
 	useSession,
+	useOrderingTheme,
 	SingleProductCard as SingleProductCardController
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -39,7 +40,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	} = props;
 
 	const theme = useTheme();
-	const showAddButton = !theme?.layouts?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
+	const [orderingTheme] = useOrderingTheme()
+	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
 
 	const styles = StyleSheet.create({
 		container: {
@@ -132,7 +134,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
 			{isIntersectionObserver ? (
 				<CardContainer
-					showAddButton={showAddButton}
+					showAddButton={!hideAddButton}
 					style={[
 						styles.container,
 						(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
@@ -231,7 +233,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							</SoldOut>
 						)}
 					</View>
-					{showAddButton && (
+					{!hideAddButton && (
 						<OButton
 							onClick={() => onProductClick?.(product)}
 							style={{