ordering-ui-react-native 0.16.14 → 0.16.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.14",
+  "version": "0.16.17",
   "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/src/navigators/CheckoutNavigator.tsx

@@ -6,6 +6,7 @@ import AddressForm from '../pages/AddressForm'
 import CartList from '../pages/CartList'
 import CheckoutPage from '../pages/Checkout';
 import BusinessProductsList from '../pages/BusinessProductsList';
+import MultiCheckout from '../pages/MultiCheckout';
 
 const Stack = createStackNavigator();
 
@@ -53,6 +54,11 @@ const CheckoutNavigator = (props: any) => {
         component={AddressForm}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="MultiCheckout"
+        children={() => <MultiCheckout {...checkoutProps} />}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 }

package/src/navigators/HomeNavigator.tsx

@@ -23,6 +23,7 @@ import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
 import Sessions from '../pages/Sessions';
 import Splash from '../pages/Splash';
 import ProductDetails from '../pages/ProductDetails';
+import MultiOrdersDetails from '../pages/MultiOrdersDetails';
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
@@ -170,6 +171,11 @@ const HomeNavigator = (e : any) => {
                     component={Sessions}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="MultiOrdersDetails"
+                    component={MultiOrdersDetails}
+                    options={{ headerShown: false }}
+                  />
                 </>
               )}
             </>

package/src/pages/MultiCheckout.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Platform, KeyboardAvoidingView, StyleSheet } from 'react-native'
+import { MultiCheckout as MultiCheckoutController } from '../../themes/original/src/components/MultiCheckout'
+
+const MultiCheckout = (props: any) => {
+  const multiCheckoutProps = {
+    ...props,
+    onPlaceOrderClick: (orderUuids: any) => {
+      props.navigation.navigate('MultiOrdersDetails', { orderUuids: orderUuids, isFromMultiCheckout: true })
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <MultiCheckoutController {...multiCheckoutProps} />
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingBottom: 70,
+  },
+});
+
+export default MultiCheckout

package/src/pages/MultiOrdersDetails.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import { MultiOrdersDetails as MultiOrdersDetailsController } from '../../themes/original/src/components/MultiOrdersDetails'
+import styled from 'styled-components/native';
+
+const SafeAreaContainer = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+  padding-top: ${Platform.OS === 'ios' ? '0px' : '24px'};
+`;
+
+const MultiOrdersDetails = ({ navigation, route }: any) => {
+  const multiOrdersDetailsProps = {
+    navigation,
+    orderUuids: route.params?.orderUuids || [],
+    isFromMultiCheckout: route.params?.isFromMultiCheckout,
+    onRedirectPage: () => navigation.navigate('BusinessList')
+  }
+
+  return (
+    <SafeAreaContainer>
+      <MultiOrdersDetailsController {...multiOrdersDetailsProps} />
+    </SafeAreaContainer>
+  )
+}
+
+export default MultiOrdersDetails

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

@@ -32,6 +32,7 @@ import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
 import { Messages } from './src/components/Messages';
+import { MyOrders } from './src/components/MyOrders';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -47,6 +48,8 @@ import { UpsellingProducts } from './src/components/UpsellingProducts';
 import { UserVerification } from './src/components/UserVerification';
 import { BusinessListingSearch } from './src/components/BusinessListingSearch';
 import { LastOrders } from './src/components/LastOrders';
+import { MultiCheckout } from './src/components/MultiCheckout'
+import { MultiOrdersDetails } from './src/components/MultiOrdersDetails'
 import NavBar from './src/components/NavBar';
 import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
@@ -187,6 +190,8 @@ export {
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	MultiCheckout,
+	MultiOrdersDetails,
 	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
@@ -240,6 +245,7 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	MyOrders,
 	ORDER_TYPES,
 	USER_TYPE,
 

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

@@ -21,7 +21,8 @@ export const BusinessItemAccordion = (props: any) => {
 		singleBusiness,
 		handleClearProducts,
 		handleClickCheckout,
-		checkoutButtonDisabled
+		checkoutButtonDisabled,
+		isMultiCheckout
 	} = props
 
 	const [orderState] = useOrder();
@@ -139,7 +140,7 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && (
+			{!isActive && !isClosed && !!isProducts && !isMultiCheckout && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
 					{cart?.valid_products && (

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

@@ -7,10 +7,8 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-  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

@@ -102,6 +102,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
+	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
 	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
@@ -123,13 +124,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
+		if (isCheckoutMultiBusinessEnabled) {
+			onRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+			onRedirect('CheckoutNavigator', {
+				screen: 'CheckoutPage',
+				cartUuid: currentCart?.uuid,
+				businessLogo: logo,
+				businessName: business?.name,
+				cartTotal: currentCart?.total
+			})
+		}
 		setOpenUpselling(false)
 	}
 
@@ -249,6 +256,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 			{business?.categories?.length > 0 && isOpenFiltProducts && (
 					<FiltProductsContainer
+						isIos={Platform.OS === 'ios'}
 						style={{
 							height: Dimensions.get('window').height - filtProductsHeight
 						}}
@@ -278,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

@@ -39,7 +39,8 @@ const CartUI = (props: any) => {
     handleChangeComment,
     commentState,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    isMultiCheckout
   } = props
 
   const theme = useTheme();
@@ -59,6 +60,7 @@ 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 business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
@@ -96,13 +98,19 @@ const CartUI = (props: any) => {
   const handleUpsellingPage = () => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    props.onNavigationRedirect('CheckoutNavigator', {
-      screen: 'CheckoutPage',
-      cartUuid: cart?.uuid,
-      businessLogo: cart?.business?.logo,
-      businessName: cart?.business?.name,
-      cartTotal: cart?.total
-    })
+    if (isCheckoutMultiBusinessEnabled) {
+			props.onNavigationRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
+      })
+    }
   }
 
   const getIncludedTaxes = () => {
@@ -165,6 +173,7 @@ const CartUI = (props: any) => {
         handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+        isMultiCheckout={isMultiCheckout}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
@@ -409,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={() => {}}