ordering-ui-react-native 0.16.16 → 0.16.19

package/package.json

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

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

@@ -45,7 +45,7 @@ export const BusinessItemAccordion = (props: any) => {
 	}, [orderState?.carts])
 
 	return (
-		<BIContainer isClosed={isClosed} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
+		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
 				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}

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

@@ -7,8 +7,12 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
+  ${(props: any) => !props.isMultiCheckout && css`
+    min-height: 120px;
+  `}
   ${(props: any) => props.isClosed && css`
 	  opacity: 0.5;
+    min-height: 60px;
   `}
 `
 

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

@@ -31,7 +31,8 @@ import {
 	ListWrapper,
 	FeaturedWrapper,
 	OrderProgressWrapper,
-	FarAwayMessage
+	FarAwayMessage,
+	AddressInputContainer
 } from './styles';
 
 import { SearchBar } from '../SearchBar';
@@ -84,7 +85,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		wrapperOrderOptions: {
 			width: '100%',
 			flexDirection: 'row',
-			justifyContent: 'space-between',
+			justifyContent: 'center',
 			marginBottom: 10,
 			zIndex: 100,
 		},
@@ -94,7 +95,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			borderRadius: 10,
 		},
 		searchInput: {
-			fontSize: 12,
+			fontSize: 16,
+			backgroundColor: theme.colors.white,
+			paddingLeft: 10,
+			paddingTop: 7
 		},
 		iconStyle: {
 			fontSize: 18,
@@ -104,6 +108,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		farAwayMsg: {
 			paddingVertical: 6,
 			paddingHorizontal: 20
+		},
+		inputContainerStyles: {
+			backgroundColor: theme.colors.white,
+			borderColor: theme.colors.backgroundGray,
+			borderWidth: 1,
 		}
 	});
 
@@ -124,7 +133,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		Number(configs?.max_days_preorder?.value) > 0
 	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 	const timerId = useRef<any>(false)
-  const [favoriteIds, setFavoriteIds] = useState<any>([])
+	const [favoriteIds, setFavoriteIds] = useState<any>([])
 
 	// const panResponder = useRef(
 	// 	PanResponder.create({
@@ -219,7 +228,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}, [orderState?.options?.address?.location])
 
 	useEffect(() => {
-		if(!orderState?.loading){
+		if (!orderState?.loading) {
 			setOrderTypeValue(orderState?.options?.type)
 		}
 	}, [orderState?.options?.type])
@@ -232,15 +241,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	)
 
 	useEffect(() => {
-    if (!businessesList?.businesses?.length) return
-    const ids = [...favoriteIds]
-    businessesList.businesses.forEach((business: any) => {
-      if (business?.favorite) {
-        ids.push(business?.id)
-      }
-    })
-    setFavoriteIds([...new Set(ids)])
-  }, [businessesList?.businesses?.length])
+		if (!businessesList?.businesses?.length) return
+		const ids = [...favoriteIds]
+		businessesList.businesses.forEach((business: any) => {
+			if (business?.favorite) {
+				ids.push(business?.id)
+			}
+		})
+		setFavoriteIds([...new Set(ids)])
+	}, [businessesList?.businesses?.length])
 
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
@@ -251,15 +260,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				/>
 			}
 		>
-			<HeaderWrapper
-				source={theme.images.backgrounds.business_list_header}
-				style={{ paddingTop: top + 20 }}>
-				{!auth && (
-					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
-					</TouchableOpacity>
-				)}
-
+			<View style={{ height: isFarAway ? 150 : 100, marginTop: Platform.OS == 'ios' ? 0 : 50 }}>
 				<Search>
 					<AddressInput
 						onPress={() =>
@@ -271,15 +272,22 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									isGuestUser: isGuestUser
 								})
 						}>
-						<OIcon
-							src={theme.images.general.pin}
-							color={theme.colors.disabled}
-							width={16}
-							style={{ marginRight: 10 }}
-						/>
-						<OText size={12} numberOfLines={1} style={{ width: '90%' }}>
-							{orderState?.options?.address?.address}
-						</OText>
+						<AddressInputContainer>
+							<OIcon
+								src={theme.images.general.pin}
+								color={theme.colors.disabled}
+								width={16}
+								style={{ marginRight: 10 }}
+							/>
+							<OText size={12} numberOfLines={1}>
+								{orderState?.options?.address?.address}
+							</OText>
+							<OIcon
+								src={theme.images.general.arrow_down}
+								width={10}
+								style={{ marginStart: 8 }}
+							/>
+						</AddressInputContainer>
 					</AddressInput>
 				</Search>
 				{isFarAway && (
@@ -288,16 +296,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
+
 				<OrderControlContainer>
 					<View style={styles.wrapperOrderOptions}>
-						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
-							<OIcon
-								src={theme.images.general.arrow_down}
-								width={10}
-								style={{ marginStart: 8 }}
-							/>
-						</WrapMomentOption>
 						{isPreOrderSetting && (
 							<WrapMomentOption
 								onPress={() => handleMomentClick()}>
@@ -319,27 +320,48 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								)}
 							</WrapMomentOption>
 						)}
-
-						{!businessId && (
-							<SearchBar
-								onSearch={handleChangeSearch}
-								searchValue={searchValue}
-								lazyLoad
-								isCancelXButtonShow={!!searchValue}
-								borderStyle={styles.borderStyle}
-								onCancel={() => handleChangeSearch('')}
-								placeholder={t('SEARCH', 'Search')}
-								height={26}
-								isDisabled={!businessTypes}
-								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-								onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
+						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
+							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
+							<OIcon
+								src={theme.images.general.arrow_down}
+								width={10}
+								style={{ marginStart: 8 }}
 							/>
-						)}
-
+						</WrapMomentOption>
 					</View>
 				</OrderControlContainer>
+			</View>
+			<HeaderWrapper
+				source={theme.images.backgrounds.business_list_header}
+				style={{ paddingTop: top + 20 }}
+				resizeMode='stretch'
+			>
+				{!auth && (
+					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+					</TouchableOpacity>
+				)}
 			</HeaderWrapper>
-
+			{!businessId && (
+				<SearchBar
+					onSearch={handleChangeSearch}
+					searchValue={searchValue}
+					lazyLoad
+					hideIcon
+					isCancelXButtonShow={!!searchValue}
+					onCancel={() => handleChangeSearch('')}
+					placeholder={t('SEARCH', 'Search')}
+					height={50}
+					isDisabled={!businessTypes}
+					inputContainerStyles={styles.inputContainerStyles}
+					containerStyles={{
+						marginHorizontal: 40,
+						marginTop: 20
+					}}
+					inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? { paddingBottom: 6 } : { paddingBottom: 4 } }}
+					onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
+				/>
+			)}
 			<OrderProgressWrapper>
 				<OrderProgress
 					{...props}
@@ -408,7 +430,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)}
 				{businessesList.businesses?.map(
-					(business: any, i : number) => (
+					(business: any, i: number) => (
 						<BusinessController
 							key={`${business.id}_` + i}
 							business={business}

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

@@ -15,6 +15,7 @@ export const Search = styled.View`
   justify-content: flex-end;
   align-items: center;
   margin-vertical: 10px;
+  margin-horizontal: 20px;
 `
 
 export const AddressInput = styled.TouchableOpacity`
@@ -39,7 +40,7 @@ export const OrderControlContainer = styled.View`
 `
 
 export const WrapMomentOption = styled.TouchableOpacity`
-  background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+  background-color: ${(props: any) => props.theme.colors.white};
   border-radius: 7.6px;
   font-size: 12px;
   max-width: 240px;
@@ -53,7 +54,7 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-	height: 370px;
+	height: 270px;
 	padding: 20px 40px;
 	background-color: transparent;
 `;
@@ -79,7 +80,14 @@ export const FarAwayMessage = styled.View`
   flex-direction: row;
   align-items: center;
 	background-color: ${(props: any) => props.theme.colors.warning1};
-  margin-bottom: 25px;
+  margin-bottom: 10px;
   border-radius: 7.6px;
   border: 1px solid ${(props: any) => props.theme.colors.warning5};
 `
+
+export const AddressInputContainer = styled.View`
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  justify-content: center
+`

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

@@ -418,31 +418,35 @@ const CartUI = (props: any) => {
             )}
           </OSBill>
         )}
-        {cart?.valid_products ? (
-          <CheckoutAction>
-            <OButton
-              text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-                !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
-              ) : !cart?.valid_address ? (
-                `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
-              ) : (
-                `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
-              )}
-              bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-              isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
-              borderColor={theme.colors.primary}
-              imgRightSrc={null}
-              textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-              onClick={() => setOpenUpselling(true)}
-              style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-            />
-          </CheckoutAction>
-        ) : (
-          <View style={{ alignItems: 'center', width: '100%' }}>
-            <OText size={12} color={theme.colors.red} style={{ textAlign: 'center', marginTop: 5 }}>
-              {t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
-            </OText>
-          </View>
+        {!isMultiCheckout && (
+          <>
+            {cart?.valid_products ? (
+              <CheckoutAction>
+                <OButton
+                  text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
+                    !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
+                  ) : !cart?.valid_address ? (
+                    `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
+                  ) : (
+                    `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
+                  )}
+                  bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+                  borderColor={theme.colors.primary}
+                  imgRightSrc={null}
+                  textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+                  onClick={() => setOpenUpselling(true)}
+                  style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+                />
+              </CheckoutAction>
+            ) : (
+              <View style={{ alignItems: 'center', width: '100%' }}>
+                <OText size={12} color={theme.colors.red} style={{ textAlign: 'center', marginTop: 5 }}>
+                  {t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+                </OText>
+              </View>
+            )}
+          </>          
         )}
       </BusinessItemAccordion>
 

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

@@ -107,7 +107,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         {t('PAYMENT_METHODS', 'Payment Methods')}
       </OText>
       {paymethodsAndWallets.loading ? (
-        <Placeholder style={{ marginTop: 10 }} Animation={Fade}>
+        <Placeholder style={{ marginTop: 10, marginBottom: 10 }} Animation={Fade}>
           <View style={{ display: 'flex', flexDirection: 'row' }}>
             {[...Array(3)].map((_, i) => (
               <PlaceholderLine
@@ -115,7 +115,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
                 width={37}
                 height={80}
                 noMargin
-                style={{ borderRadius: 10, marginRight: 10 }}
+                style={{ borderRadius: 10, marginRight: 10, }}
               />
             ))}
           </View>

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

@@ -77,7 +77,8 @@ const MultiCheckoutUI = (props: any) => {
 
 	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
-  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || placing
+  const maximumCarts = 5
+  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts
 
 	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
@@ -240,6 +241,7 @@ const MultiCheckoutUI = (props: any) => {
                     cart={cart}
                     cartuuid={cart.uuid}
                     isMultiCheckout
+                    onNavigationRedirect={(route: string, params: any) => props.navigation.navigate(route, params)}
                   />
                   <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
                 </React.Fragment>
@@ -264,6 +266,11 @@ const MultiCheckoutUI = (props: any) => {
                   </OText>
                 </ChCartsTotal>
               )}
+              {openCarts.length > maximumCarts && (
+                <OText size={14} color={theme.colors.danger5} style={{ marginVertical: 20 }}>
+                  {t('WARNING_MAXIMUM_CARTS', 'You can only pay for a maximum of 5 carts, please discard one or more to continue.')}
+                </OText>
+              )}
             </ChCarts>
           </ChSection>
         </ChContainer>

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

@@ -258,25 +258,27 @@ const SingleOrderCardUI = (props: any) => {
   return (
     <SingleOrderContainer>
       <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 35 }}>
-        <View>
+        <View style={{ flex: 1, marginRight: 10 }}>
           <OText size={16} lineHeight={24} mBottom={5} weight={'500'} color={theme.colors.textNormal}>
             {t('ORDER', 'Order')} #{order.id}
           </OText>
-          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flexDirection: 'row' }}>
             <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{orderTypes?.find((type: any) => order?.delivery_type === type?.value)?.text}:</OText>
-            <OText mLeft={10} size={12} lineHeight={18} color={theme.colors.textNormal}>
-              {
-                order?.delivery_datetime_utc
-                  ? parseDate(order?.delivery_datetime_utc)
-                  : parseDate(order?.delivery_datetime, { utc: false })
-              }
-            </OText>
+            <View style={{ flex: 1 }}>
+              <OText mLeft={5} size={12} lineHeight={18} color={theme.colors.textNormal}>
+                {
+                  order?.delivery_datetime_utc
+                    ? parseDate(order?.delivery_datetime_utc)
+                    : parseDate(order?.delivery_datetime, { utc: false })
+                }
+              </OText>
+            </View>
           </View>
         </View>
         <OButton
           onClick={() => handleGoToOrderDetails(order?.uuid)}
-          textStyle={{ color: theme.colors.primary, textAlign: 'center' }}
-          style={{ flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+          textStyle={{ color: theme.colors.primary, textAlign: 'center', fontSize: 14 }}
+          style={{ flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0, paddingLeft: 5, paddingRight: 5, height: 44 }}
           text={t('ORDER_DETAILS', 'Order Details')}
           bgColor={theme.colors.white}
           borderColor={theme.colors.primary}

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { useLanguage, useUtils, useToast,	ToastType, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, BackHandler } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OText, OButton } from '../shared'
 import { Container } from '../../layouts/Container'
@@ -53,12 +53,13 @@ export const MultiOrdersDetailsUI = (props: any) => {
     }
   }
 
-  const handleBackNavigation = () => {
+  const handleArrowBack: any = () => {
     if (!isFromMultiCheckout) {
       navigation?.canGoBack() && navigation.goBack();
       return;
     }
-    navigation.navigate('BottomTab');
+    navigation.navigate('BusinessList');
+    return true
 	}
 
   const handleGoToOrderDetails = (uuid: any) => {
@@ -71,6 +72,13 @@ export const MultiOrdersDetailsUI = (props: any) => {
     }
   }, [error])
 
+  useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', handleArrowBack)
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', handleArrowBack)
+    }
+  }, [])
+
   return (
     <OrdersDetailsContainer keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingHorizontal: 40 }}>
       <View style={{ flexDirection: 'row' }}>
@@ -78,7 +86,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           imgLeftSrc={theme.images.general.arrow_left}
           imgRightSrc={null}
           style={styles.btnBackArrow}
-          onClick={() => handleBackNavigation()}
+          onClick={() => handleArrowBack()}
           imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
         />
       </View>

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

@@ -22,7 +22,10 @@ export const SearchBar = (props: any) => {
 		isDisabled,
 		iconCustomRight,
 		onSubmitEditing,
-		blurOnSubmit
+		blurOnSubmit,
+		inputContainerStyles,
+		containerStyles,
+		hideIcon
 	} = props
 
 	const theme = useTheme();
@@ -77,13 +80,13 @@ export const SearchBar = (props: any) => {
 	}
 
 	return (
-		<Pressable style={[styles.container, { height: height }]}>
+		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={styles.inputStyle}
+				style={{...styles.inputStyle, ...inputContainerStyles}}
 				placeholder={placeholder}
-				icon={theme.images.general.search}
+				icon={!hideIcon && theme.images.general.search}
 				isDisabled={isDisabled}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'