ordering-ui-react-native 0.17.80 → 0.17.82

package/package.json

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

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

@@ -191,7 +191,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
 
   const isInteger = (val: any) => Number.isInteger(Number(val)) && !!val
 
-  const onProductClick = (business: any, categoryId: any, productId: any) => {
+
+  const onProductClick = (business: any, categoryId: any, productId: any, product: any) => {
     if (!isInteger(business?.id) ||
       !isInteger(categoryId) ||
       !isInteger(productId) ||
@@ -199,17 +200,20 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       showToast(ToastType.error, t('NOT_AVAILABLE', 'Not Available'))
       return
     }
-
+    const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
+    const productAddedToCartLength = currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === productId ? Cproduct?.quantity : 0) }, 0) || 0
     navigation.navigate('ProductDetails', {
       isRedirect: 'business',
       businessId: business?.id,
       categoryId: categoryId,
       productId: productId,
+      product: product,
       business: {
         store: business.slug,
         header: business.header,
         logo: business.logo,
-      }
+      },
+      productAddedToCartLength
     })
   }
 
@@ -293,7 +297,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             />
           </View>
         ))}
-        {console.log(screenWidth)}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
           <LoadMoreBusinessContainer>
             <OButton
@@ -361,7 +364,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   product={product}
                   enableIntersection={false}
                   businessId={business?.id}
-                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
+                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id, product)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                   style={{ width: screenWidth - 80, maxWidth: screenWidth - 80, marginRight: 20 }}

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -156,6 +156,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				code: isProductAddedToCart?.code,
 				quantity: productQuantity + 1
 			}
+			Vibration.vibrate()
 			const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
 			if (isProductAddedToCart) {
 				await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)

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

@@ -308,7 +308,7 @@ const CheckoutUI = (props: any) => {
 						titleAlign={'center'}
 						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 						showCall={false}
-						btnStyle={{ paddingLeft: 0 }}
+						btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
 					/>
@@ -578,7 +578,7 @@ const CheckoutUI = (props: any) => {
 									cart={cart}
 									isDisabled={cart?.status === 2}
 									businessId={!isGiftCardCart ? businessDetails?.business?.id : -1}
-                					isLoading={!isGiftCardCart ? businessDetails.loading : false}
+									isLoading={!isGiftCardCart ? businessDetails.loading : false}
 									paymethods={businessDetails?.business?.paymethods}
 									onPaymentChange={handlePaymethodChange}
 									errorCash={errorCash}

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

@@ -36,7 +36,7 @@ export const Favorite = (props: any) => {
 
   return (
     <Container
-      pdng={Platform.OS === 'ios' ? '20px' : '30px'}
+      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
     >
       <NavBar
         title={t('FAVORITE', 'Favorite')}

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RefreshControl } from 'react-native'
+import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
@@ -31,7 +31,7 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
-      pt={10}
+      pt={Platform.OS === 'ios' ? 20 : 10}
       noPadding
       refreshControl={
         <RefreshControl

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

@@ -3,7 +3,7 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import NavBar from '../NavBar'
 import {
   Content,
@@ -37,7 +37,7 @@ export const HelpGuide = (props: HelpGuideParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <Container>
+    <Container pdng={Platform.OS === 'ios' ? '10px' : '0px'}>
       <NavBar
         title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
         onActionLeft={goToBack}

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

@@ -8,4 +8,5 @@ export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
     margin: 10px 0;
+    padding-top: ${(props: any) => props.pdng}
 `

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

@@ -16,7 +16,7 @@ import {
 	PlaceholderLine,
 	Fade
 } from "rn-placeholder";
-import { View, BackHandler } from 'react-native'
+import { View, BackHandler, Platform } from 'react-native'
 import {
 	MessageListingWrapper,
 	MessageContainer
@@ -77,7 +77,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
 			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
 			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
+			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -102,7 +102,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}, [orderList, loading])
 
 	useEffect(() => {
-		if(refreshOrders){
+		if (refreshOrders) {
 			loadOrders(false, false, false, true)
 			setRefreshOrders && setRefreshOrders(false)
 		}
@@ -225,7 +225,7 @@ const OrderMessageUI = (props: any) => {
 }
 
 export const OrderListing = (props: OrdersOptionParams) => {
-  const [businessState] = useBusiness();
+	const [businessState] = useBusiness();
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
@@ -236,7 +236,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			pageSize: 10,
 			controlType: 'infinity'
 		},
-    businessId: businessState?.business?.id,
+		businessId: businessState?.business?.id,
 		profileMessages: true,
 		orderBy: 'last_direct_message_at',
 		orderDirection: 'asc'
@@ -292,7 +292,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				paddingTop={10}
+				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
 			/>
 			<OrderListing
@@ -300,7 +300,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				setSelectedOrderId={setSelectedOrderId}
 				setOrderList={setOrderListStatus}
 				setOpenMessges={setOpenMessges}
-        franchiseId={props.franchiseId}
+				franchiseId={props.franchiseId}
 			/>
 			{openMessages && seletedOrder && (
 				<OModal

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

@@ -51,6 +51,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import NavBar from '../NavBar';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -166,6 +167,10 @@ export const ProductOptionsUI = (props: any) => {
 			justifyContent: 'space-between',
 			width: '100%',
 			marginTop: 10
+		},
+		wrapperNavbar: {
+			paddingHorizontal: 40,
+			paddingTop: 0,
 		}
 	});
 
@@ -208,12 +213,12 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-        Vibration.vibrate()
+		Vibration.vibrate()
 		if (!productCart.quantity) {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_REQUIRED', 'The quantity field is required').replace('_attribute_', t('PRODUCT_POTIONS_QUANTITY', 'Quantity')))
 			return
 		}
-		const isErrors = Object.values(errors).length > 0;
+		const isErrors = Object.values(errors)?.length > 0;
 		if (!isErrors) {
 			handleSave && handleSave();
 			return;
@@ -232,7 +237,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleChangeMainIndex = (index: number) => {
-		if (index < 0 || index > gallery.length - 1) {
+		if (index < 0 || index > gallery?.length - 1) {
 			setThumbsSwiper(0)
 			return
 		}
@@ -275,7 +280,7 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const scrollDown = (id: any) => {
-		const isErrors = Object.values(errors).length > 0
+		const isErrors = Object.values(errors)?.length > 0
 		if (!isErrors) {
 			return
 		}
@@ -299,7 +304,7 @@ export const ProductOptionsUI = (props: any) => {
 	const saveErrors =
 		orderState.loading ||
 		maxProductQuantity === 0 ||
-		Object.keys(errors).length > 0;
+		Object.keys(errors)?.length > 0;
 
 
 	const ExtraOptions = ({ eID, options }: any) => (
@@ -366,14 +371,14 @@ export const ProductOptionsUI = (props: any) => {
 			? product.images
 			: theme?.images?.dummies?.product)
 
-		if (product?.gallery && product?.gallery.length > 0) {
+		if (product?.gallery && product?.gallery?.length > 0) {
 			for (const img of product?.gallery) {
 				if (img?.file) {
 					imageList.push(img?.file)
 				}
 				if (img?.video) {
 					const keys = img?.video.split('/')
-					let _videoId = keys[keys.length - 1]
+					let _videoId = keys[keys?.length - 1]
 
 					if (_videoId.includes('watch')) {
 						const __url = _videoId.split('=')[1]
@@ -388,7 +393,7 @@ export const ProductOptionsUI = (props: any) => {
 					} else if (_videoId.search(/\?/i) >= 0) {
 						_videoId = _videoId.split('?')[0]
 					}
-					if ((_videoId.length === 11)) {
+					if ((_videoId?.length === 11)) {
 						videoList.push(_videoId)
 					}
 				}
@@ -483,14 +488,16 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [])
 
-
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
-			<TopHeader>
-				<TopActions onPress={() => handleGoBack()}>
-					<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-				</TopActions>
-			</TopHeader>
+			<View style={styles.wrapperNavbar}>
+				<NavBar
+					onActionLeft={() => handleGoBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					paddingTop={4}
+				/>
+			</View>
 			{!error && (
 				<ScrollView
 					ref={scrollViewRef}
@@ -539,7 +546,7 @@ export const ProductOptionsUI = (props: any) => {
 										</View>
 									}
 								>
-									{gallery && gallery.length > 0 && gallery.map((img, i) => (
+									{gallery && gallery?.length > 0 && gallery.map((img, i) => (
 										<View
 											style={styles.slide1}
 											key={i}
@@ -574,7 +581,7 @@ export const ProductOptionsUI = (props: any) => {
 										paddingVertical: 15
 									}}
 								>
-									{gallery.length > 0 && gallery.map((img, index) => (
+									{gallery?.length > 0 && gallery.map((img, index) => (
 										<TouchableOpacity
 											key={index}
 											onPress={() => handleClickThumb(index)}
@@ -729,7 +736,7 @@ export const ProductOptionsUI = (props: any) => {
 								backgroundColor: theme.colors.backgroundPage,
 							}}
 						>
-							{product?.ingredients.length > 0 && (
+							{product?.ingredients?.length > 0 && (
 								<TouchableOpacity
 									key={`eopt_key_01`}
 									onPress={() => {
@@ -754,7 +761,7 @@ export const ProductOptionsUI = (props: any) => {
 									</OText>
 								</TouchableOpacity>
 							)}
-							{product?.extras.map((extra: any) =>
+							{product?.extras?.map((extra: any) =>
 								<ExtraOptions key={extra.id} options={extra.options} />
 							)}
 						</ExtraOptionWrap>
@@ -805,7 +812,7 @@ export const ProductOptionsUI = (props: any) => {
 							}}
 						>
 							<>
-								{product?.ingredients.length > 0 && (
+								{product?.ingredients?.length > 0 && (
 									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
 										<SectionTitle>
 											<OText size={16}>
@@ -827,8 +834,8 @@ export const ProductOptionsUI = (props: any) => {
 										</WrapperIngredients>
 									</View>
 								)}
-								{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
-									extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+								{product?.extras?.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
+									extra.options?.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 										const currentState =
 											productCart.options[`id:${option.id}`] || {};
 										return (
@@ -844,7 +851,7 @@ export const ProductOptionsUI = (props: any) => {
 																	backgroundColor: isError(option.id),
 																	borderRadius: 7.6
 																}}>
-																{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
+																{option?.suboptions?.sort((a: any, b: any) => a.rank - b.rank).map(
 																	(suboption: any) => {
 																		const currentState =
 																			productCart.options[
@@ -909,7 +916,7 @@ export const ProductOptionsUI = (props: any) => {
 							)}
 						</ProductEditions>
 					)}
-					{!!error && error.length > 0 && (
+					{!!error && error?.length > 0 && (
 						<NotFoundSource content={error[0]?.message || error[0]} />
 					)}
 				</ScrollView>

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

@@ -32,7 +32,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		setIsScrollAvailable
 	} = props
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 
 	const theme = useTheme();

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, TouchableOpacity } from 'react-native'
+import { View, TouchableOpacity, Platform } from 'react-native'
 import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { SessionsParams } from '../../types'
@@ -12,7 +12,8 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import {
   SessionsWrapper,
   SessionItem,
-  DurationWrapper
+  DurationWrapper,
+  Container
 } from './styles'
 
 export const SessionsUI = (props: SessionsParams) => {
@@ -27,7 +28,7 @@ export const SessionsUI = (props: SessionsParams) => {
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [{ parseDate }] = useUtils()
-	const theme = useTheme()
+  const theme = useTheme()
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -61,7 +62,9 @@ export const SessionsUI = (props: SessionsParams) => {
   }
 
   return (
-    <>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '0'}
+    >
       <NavBar
         title={t('SESSIONS', 'Sessions')}
         titleAlign={'center'}
@@ -77,11 +80,11 @@ export const SessionsUI = (props: SessionsParams) => {
               <SessionItem key={i}>
                 <Placeholder Animation={Fade}>
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={{ flex: 1}}>
+                    <View style={{ flex: 1 }}>
                       <PlaceholderLine width={40} />
                       <PlaceholderLine width={40} />
                     </View>
-                    <PlaceholderLine width={5}/>
+                    <PlaceholderLine width={5} />
                   </View>
                 </Placeholder>
               </SessionItem>
@@ -120,7 +123,7 @@ export const SessionsUI = (props: SessionsParams) => {
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
               </SessionsWrapper>
-             ) : (
+            ) : (
               <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
             )
           )}
@@ -147,7 +150,7 @@ export const SessionsUI = (props: SessionsParams) => {
         onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
         onClose={() => setConfirm({ ...confirm, open: false, title: null })}
       />
-    </>
+    </Container>
   )
 }
 

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

@@ -13,3 +13,7 @@ export const SessionItem = styled.View`
 export const DurationWrapper = styled.View`
   /* flex-direction: row; */
 `
+
+export const Container = styled.View`
+  padding-top: ${(props: any) => props.pdng};
+`

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

@@ -84,9 +84,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       marginRight: 2,
     },
     reorderLoading: {
-      width: 80,
-      height: 40,
-      borderRadius: 10,
+      height: 23,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
     },
     reorderbutton: {
       height: 23,
@@ -183,8 +187,6 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const handleOriginalReorder = () => {
     setConfirm({ ...confirm, open: false, title: null })
-    setReorderSelected(order?.id);
-    handleReorder && handleReorder(order?.id);
   }
 
   return (

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

@@ -21,7 +21,6 @@ import {
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const {
@@ -166,17 +165,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const UpsellingContent = () => {
 		return (
 			<>
-				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
-					<OButton
-						imgRightSrc={null}
-						style={styles.btnBackArrow}
-						onClick={() => onGoBack()}
-						icon={AntDesignIcon}
-						iconProps={{
-							name: 'arrowleft',
-							size: 26
-						}}
-					/>
+				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 14 }}>
+					<TouchableOpacity onPress={() => onGoBack()} style={styles.btnBackArrow}>
+						<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+					</TouchableOpacity>
 				</View>
 				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&

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

@@ -278,7 +278,9 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
-			<Container>
+			<Container
+				pdng={Platform.OS === 'ios' ? '20px' : '10px'}
+			>
 				<NavBar
 					title={t('ACCOUNT', 'Account')}
 					titleAlign={'center'}

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

@@ -12,7 +12,7 @@ export const UserData = styled.View`
 export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
-	  paddingTop: 20px;
+	  padding-top: ${(props: any) => props.pdng};
     margin-bottom: 40px;
 `