ordering-ui-react-native 0.16.15 → 0.16.18

package/package.json

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

package/src/components/OrderDetails/index.tsx

@@ -276,7 +276,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     };
   }, [])
 
-
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps='handled'>
       {order && order?.id && !error && !loading && (
@@ -400,6 +399,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <InfoBlock>
                   <OText size={18} style={{ textAlign: 'left' }} >{order?.customer?.name} {order?.customer?.lastname}</OText>
                   <OText style={{ textAlign: 'left' }}>{order?.customer?.address}</OText>
+                  {(!!order?.customer?.cellphone) && (
+                    <OText size={18} style={{ textAlign: 'left' }}>
+                      {(order?.customer?.country_phone_code) && `+${(order?.customer?.country_phone_code)} `}{(order?.customer?.cellphone)}
+                    </OText>
+                  )}
                 </InfoBlock>
               </Customer>
               {order?.delivery_option !== undefined && order?.delivery_type === 1 && (

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -274,8 +274,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${order?.customer?.cellphone}`}
-              shorcut={order?.customer?.cellphone}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
           </View>

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/BusinessProductsList/index.tsx

@@ -124,6 +124,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               isSoldOut={product.inventoried && !product.quantity}
               product={product}
               businessId={businessId}
+              categoryState={categoryState}
               onProductClick={() => onProductClick(product)}
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
               handleUpdateProducts={handleUpdateProducts}
@@ -148,6 +149,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
                       businessId={businessId}
+                      categoryState={categoryState}
                       onProductClick={onProductClick}
                       handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
@@ -236,10 +238,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
-                      key={i}
+                      key={`${product?.id}_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
+                      categoryState={categoryState}
                       onProductClick={onProductClick}
                       handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}

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

@@ -256,6 +256,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 			{business?.categories?.length > 0 && isOpenFiltProducts && (
 					<FiltProductsContainer
+						isIos={Platform.OS === 'ios'}
 						style={{
 							height: Dimensions.get('window').height - filtProductsHeight
 						}}
@@ -285,6 +286,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								currentCart={currentCart}
 								setSubcategoriesSelected={setSubcategoriesSelected}
 								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
 								isFiltMode
 							/>
 						</View>

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

@@ -252,7 +252,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			}
 		>
 			<HeaderWrapper
-				source={theme.images.general.homeHero}
+				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 }}>

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/FavoriteList/index.tsx

@@ -194,9 +194,9 @@ const FavoriteListUI = (props: FavoriteParams) => {
             ))
           )}
           {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites.map((order: any) => (
+            favoriteList.favorites.map((order: any, i: number) => (
               <SingleOrderCard
-                key={order?.id}
+                key={`${order?.id}_${i}`}
                 order={order}
                 getOrderStatus={getOrderStatus}
                 onNavigationRedirect={onNavigationRedirect}
@@ -231,9 +231,9 @@ const FavoriteListUI = (props: FavoriteParams) => {
             ))
           )}
           {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites.map((product: any) => (
+            favoriteList.favorites.map((product: any, i: number) => (
               <SingleProductCard
-                key={product?.id}
+                key={`${product?.id}_${i}`}
                 isSoldOut={product.inventoried && !product.quantity}
                 product={product}
                 onProductClick={() => {}}

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/OrderDetails/index.tsx

@@ -663,13 +663,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     mBottom={2}>
                     {order?.customer?.address}
                   </OText>
-                  <OText
-                    size={12}
-                    lineHeight={18}
-                    color={theme.colors.textNormal}
-                    mBottom={2}>
-                    {order?.customer?.cellphone}
-                  </OText>
+                  {(!!order?.customer?.cellphone) && (
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textNormal}
+                      mBottom={2}>
+                      {`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+                    </OText>
+                  )}
                 </InfoBlock>
               </Customer>
               {order?.delivery_option !== undefined && order?.delivery_type === 1 && (

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

@@ -156,9 +156,11 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
         )}
         <CardInfoWrapper>
           <ContentHeader>
-            <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-              {order.business?.name}
-            </OText>
+            <View style={{ flex: 1 }}>
+              <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                {order.business?.name}
+              </OText>
+            </View>
             {!!!pastOrders && (
               <>
                 {isMessageView ? (

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

@@ -18,17 +18,19 @@ import { shape } from '../../utils';
 function SingleProductCardPropsAreEqual(prevProps : any, nextProps : any) {
 	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) && 
 	prevProps.isSoldOut === nextProps.isSoldOut && 
-	prevProps.productAddedToCartLength === nextProps.productAddedToCartLength
+	prevProps.productAddedToCartLength === nextProps.productAddedToCartLength &&
+	prevProps.categoryState === nextProps.categoryState
 }
 
-const SinguleProductCardUI = (props: SingleProductCardParams) => {
+const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const {
 		product,
 		isSoldOut,
 		onProductClick,
 		productAddedToCartLength,
 		style,
-		handleFavoriteProduct
+		handleFavoriteProduct,
+		handleUpdateProducts
 	} = props;
 
 	const theme = useTheme();
@@ -210,12 +212,12 @@ const SinguleProductCardUI = (props: SingleProductCardParams) => {
 			)}
 		</CardContainer>
 	);
-}
+}, SingleProductCardPropsAreEqual);
 
-export const SingleProductCard = React.memo((props: SingleProductCardParams) => {
+export const SingleProductCard = (props: SingleProductCardParams) => {
 	const singleProductCardProps = {
 		...props,
 		UIComponent: SinguleProductCardUI
 	}
 	return <SingleProductCardController {...singleProductCardProps} />
-}, SingleProductCardPropsAreEqual);
+}

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

@@ -278,6 +278,7 @@ export interface SingleProductCardParams {
 	onProductClick: any;
 	productAddedToCartLength: number;
 	style?: ViewStyle,
+	categoryState?: any,
 	handleFavoriteProduct?: any,
 	handleUpdateProducts?: any
 }