ordering-ui-react-native 0.16.59-release → 0.16.60-release

package/package.json

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

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

@@ -187,47 +187,35 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const handleUpsellingPage = () => {
 		setOpenUpselling(false)
 		setCanOpenUpselling(false)
-		const cartSelectedHasGroup = currentCart?.group?.uuid
-		const cartFilterValidation = (cart: any) => cart?.valid && cart?.status !== 2
-		const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter((_cart: any) => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
-		if (cartsGroupLength > 1 && isCheckoutMultiBusinessEnabled) {
-			props.onNavigationRedirect('CheckoutNavigator', {
-				screen: 'MultiCheckout',
-				cartUuid: currentCart?.group?.uuid
-			})
-			return
-		}
-		const cartGroupsCount: any = {}
-		Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach((_cart: any) => {
-			if (cartGroupsCount[_cart?.group?.uuid]) {
-				cartGroupsCount[_cart?.group?.uuid] += 1
-			} else {
-				cartGroupsCount[_cart?.group?.uuid] = 1
-			}
-		})
-		let groupForTheCart
-		const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
-		const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
-		const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
-		if (indexes?.length > 1) {
-			groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
-		} else {
-			groupForTheCart = indexes[0]
-		}
-		if (isCheckoutMultiBusinessEnabled && openCarts.length > 1) {
-			onRedirect('CheckoutNavigator', {
-				screen: 'MultiCheckout'
-			})
-		} else {
-			onRedirect('CheckoutNavigator', {
-				screen: 'CheckoutPage',
-				cartUuid: currentCart?.uuid,
-				businessLogo: logo,
-				businessName: business?.name,
-				cartTotal: currentCart?.total
-			})
-		}
-		setOpenUpselling(false)
+		const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
+    if (cartsAvailable.length === 1) {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cartsAvailable[0]?.uuid,
+        businessLogo: cartsAvailable[0]?.business?.logo,
+        businessName: cartsAvailable[0]?.business?.name,
+        cartTotal: cartsAvailable[0]?.total
+      })
+    } else {
+      const groupKeys: any = {}
+      cartsAvailable.forEach((_cart: any) => {
+        groupKeys[_cart?.group?.uuid]
+          ? groupKeys[_cart?.group?.uuid] += 1
+          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
+      })
+
+      if (
+        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+        Object.keys(groupKeys).length > 1
+      ) {
+        props.onNavigationRedirect('CheckoutNavigator', { screen: 'MultiCart' })
+      } else {
+        props.onNavigationRedirect('CheckoutNavigator', {
+          screen: 'MultiCheckout',
+          cartUuid: cartsAvailable[0]?.group?.uuid
+        })
+      }
+    }
 	}
 
 	const handleCloseUpsellingPage = () => {

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction, Divider, DriverTipsContainer } from './styles';
+import { CContainer, CheckoutAction, DriverTipsContainer } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -43,8 +43,7 @@ const CartUI = (props: any) => {
     handleRemoveOfferClick,
     isMultiCheckout,
     hideDeliveryFee,
-    hideDriverTip,
-    showGeneralBtn
+    hideDriverTip
   } = props
 
   const theme = useTheme();
@@ -64,9 +63,6 @@ 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 openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
-
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
   const placeSpotTypes = [4]
@@ -107,47 +103,34 @@ const CartUI = (props: any) => {
   const handleUpsellingPage = () => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    const cartSelectedHasGroup = cart?.group?.uuid
-    const cartFilterValidation = (cart : any) => cart?.valid && cart?.status !== 2
-    const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter((_cart : any) => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
-    if (cartsGroupLength > 1 && isCheckoutMultiBusinessEnabled) {
-      props.onNavigationRedirect('CheckoutNavigator', {
-        screen: 'MultiCheckout',
-        cartUuid: cart?.group?.uuid
+    const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
+    if (cartsAvailable.length === 1) {
+      onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cartsAvailable[0]?.uuid,
+        businessLogo: cartsAvailable[0]?.business?.logo,
+        businessName: cartsAvailable[0]?.business?.name,
+        cartTotal: cartsAvailable[0]?.total
       })
-      return
-    }
-    const cartGroupsCount : any = {}
-    Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach((_cart : any) => {
-      if (cartGroupsCount[_cart?.group?.uuid]) {
-        cartGroupsCount[_cart?.group?.uuid] += 1
-      } else {
-        cartGroupsCount[_cart?.group?.uuid] = 1
-      }
-    })
-    let groupForTheCart
-    const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
-    const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
-    const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
-    if (indexes?.length > 1) {
-      groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
     } else {
-      groupForTheCart = indexes[0]
-    }
-    if (isCheckoutMultiBusinessEnabled && openCarts.length > 1 && groupForTheCart) {
-      props.onNavigationRedirect('CheckoutNavigator', {
-        screen: 'MultiCart',
-        cartUuid: cart.uuid, 
-        cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart
-      })
-    } else {
-      props.onNavigationRedirect('CheckoutNavigator', {
-        screen: 'CheckoutPage',
-        cartUuid: cart?.uuid,
-        businessLogo: cart?.business?.logo,
-        businessName: cart?.business?.name,
-        cartTotal: cart?.total
+      const groupKeys: any = {}
+      cartsAvailable.forEach((_cart: any) => {
+        groupKeys[_cart?.group?.uuid]
+          ? groupKeys[_cart?.group?.uuid] += 1
+          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
       })
+
+      if (
+        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+        Object.keys(groupKeys).length > 1
+      ) {
+        onNavigationRedirect('CheckoutNavigator', { screen: 'MultiCart' })
+      } else {
+        onNavigationRedirect('CheckoutNavigator', {
+          screen: 'MultiCheckout',
+          cartUuid: cartsAvailable[0]?.group?.uuid
+        })
+      }
     }
   }
 
@@ -194,26 +177,6 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
-      {showGeneralBtn && cart?.valid_products &&(
-        <CheckoutAction style={{ marginTop: 0 }}>
-          <OButton
-            text={(subtotalWithTaxes >= 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={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-            isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
-            borderColor={theme.colors.primary}
-            imgRightSrc={null}
-            textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-            onClick={() => handleUpsellingPage()}
-            style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-          />
-        </CheckoutAction>
-      )}
       {openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
@@ -434,7 +397,7 @@ const CartUI = (props: any) => {
                   <DriverTips
                     uuid={cart?.uuid}
                     businessId={cart?.business_id}
-                    driverTipsOptions={driverTipsOptions}
+                    driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
                     isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
                     isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
                     driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import { useLanguage, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CCContainer, CCNotCarts, CCList } from './styles';
+import { CCContainer, CCNotCarts, CCList, CheckoutAction } from './styles';
 
 import { Cart } from '../Cart';
 import { OButton, OText } from '../shared';
@@ -22,6 +22,38 @@ export const CartContent = (props: any) => {
 
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
+
+	const handleCheckoutRedirect = () => {
+    if (cartsAvailable.length === 1) {
+      onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cartsAvailable[0]?.uuid,
+        businessLogo: cartsAvailable[0]?.business?.logo,
+        businessName: cartsAvailable[0]?.business?.name,
+        cartTotal: cartsAvailable[0]?.total
+      })
+    } else {
+      const groupKeys: any = {}
+      cartsAvailable.forEach((_cart: any) => {
+        groupKeys[_cart?.group?.uuid]
+          ? groupKeys[_cart?.group?.uuid] += 1
+          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
+      })
+
+      if (
+        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+        Object.keys(groupKeys).length > 1
+      ) {
+        onNavigationRedirect('CheckoutNavigator', { screen: 'MultiCart' })
+      } else {
+        onNavigationRedirect('CheckoutNavigator', {
+          screen: 'MultiCheckout',
+          cartUuid: cartsAvailable[0]?.group?.uuid
+        })
+      }
+    }
+	}
 
 	return (
 		<CCContainer
@@ -34,7 +66,6 @@ export const CartContent = (props: any) => {
 							{cart.products.length > 0 && (
 								<>
 									<Cart
-										showGeneralBtn={i === 0 && isMultiCheckout}
 										singleBusiness={props.singleBusiness}
 										isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
@@ -50,6 +81,20 @@ export const CartContent = (props: any) => {
 							)}
 						</CCList>
 					))}
+					{isMultiCheckout && (
+						<CheckoutAction style={{ marginTop: 0 }}>
+							<OButton
+								text={t('CHECKOUT', 'Checkout')}
+								bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
+								isDisabled={!cartsAvailable.length}
+								borderColor={theme.colors.primary}
+								imgRightSrc={null}
+								textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+								onClick={() => handleCheckoutRedirect()}
+								style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							/>
+						</CheckoutAction>
+					)}
 				</>
 			)}
 			{(!carts || carts?.length === 0) && (

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

@@ -17,3 +17,13 @@ export const CCNotCarts = styled.View`
 export const CCList = styled.ScrollView`
   padding: 10px 0px;
 `
+
+export const CheckoutAction = styled.View`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`

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

@@ -539,7 +539,7 @@ const CheckoutUI = (props: any) => {
 									<DriverTips
 										uuid={cartUuid}
 										businessId={cart?.business_id}
-										driverTipsOptions={driverTipsOptions}
+										driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
 										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
 										isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
 										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)

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

@@ -1,63 +1,50 @@
 import React from 'react'
-import { ChAddress, ChContainer, ChSection, ChUserDetails, DeliveryOptionsContainer } from '../Checkout/styles'
+import { View } from 'react-native'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
-import { Container } from '../../layouts/Container';
-import { View, StyleSheet } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import { MultiCartCreate } from 'ordering-components/native'
 
-export const MultiCartUI = () => {
-    const theme = useTheme();
-
-    const styles = StyleSheet.create({
-        pagePadding: {
-            paddingHorizontal: 40
-        }
-    })
-
-    return (
-        <>
-            <Container noPadding>
-                <ChContainer style={styles.pagePadding}>
-                    <ChSection>
-                        <ChUserDetails>
-                            <Placeholder Animation={Fade}>
-                                <PlaceholderLine height={20} />
-                                <PlaceholderLine height={12} />
-                                <PlaceholderLine height={12} />
-                                <PlaceholderLine height={12} style={{ marginBottom: 20 }} />
-                            </Placeholder>
-                        </ChUserDetails>
-                        <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
-                    </ChSection>
-                    <DeliveryOptionsContainer>
-                        <View style={{ height: 110 }}>
-                            <Placeholder Animation={Fade}>
-                                <PlaceholderLine height={20} />
-                                <PlaceholderLine height={40} />
-                            </Placeholder>
-                        </View>
-                    </DeliveryOptionsContainer>
-                    <ChSection>
-                        <ChAddress>
-                            <Placeholder Animation={Fade}>
-                                <PlaceholderLine height={20} style={{ marginBottom: 50 }} />
-                                <PlaceholderLine height={100} />
-                            </Placeholder>
-                        </ChAddress>
-                        <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
-                    </ChSection>
-                </ChContainer>
-            </Container>
+import { Container } from '../../layouts/Container';
+import { ChContainer, ChSection, ChUserDetails } from '../Checkout/styles'
 
-        </>
-    )
+export const MultiCartUI = () => {
+  const theme = useTheme();
+  return (
+    <Container noPadding>
+      <ChContainer style={{ paddingHorizontal: 40 }}>
+        <ChSection>
+          <ChUserDetails>
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
+            </Placeholder>
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
+            </Placeholder>
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={120} style={{ marginBottom: 20, borderRadius: 8 }} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+            </Placeholder>
+          </ChUserDetails>
+        </ChSection>
+      </ChContainer>
+    </Container>
+  )
 }
 
-export const MultiCart = (props : any) => {
-    const mulcartProps = {
-        ...props,
-        UIComponent: MultiCartUI
-    }
-    return <MultiCartCreate {...mulcartProps} />
+export const MultiCart = (props: any) => {
+  const mulcartProps = {
+    ...props,
+    UIComponent: MultiCartUI
+  }
+  return <MultiCartCreate {...mulcartProps} />
 }

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

@@ -39,7 +39,7 @@ export const OSItem = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 0px;
+  padding: 10px 0px;
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

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

@@ -546,7 +546,7 @@ export const ProductOptionsUI = (props: any) => {
 										>
 											{(String(img).includes('http') || typeof img === 'number') ? (
 												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 3 / 2 }}
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 16 / 9 }}
 													source={typeof img !== 'number' ? {
 														uri: optimizeImage(img, 'h_1024,c_limit'),
 														priority: FastImage.priority.normal,
@@ -574,7 +574,7 @@ export const ProductOptionsUI = (props: any) => {
 										paddingVertical: 15
 									}}
 								>
-									{gallery?.length > 0 && gallery.map((img, index) => (
+									{gallery?.length > 1 && gallery.map((img, index) => (
 										<TouchableOpacity
 											key={index}
 											onPress={() => handleClickThumb(index)}

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

@@ -151,7 +151,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           order: {
             id: order?.id,
             business_id: order?.business_id,
-            logo: order?.business?.length > 1 ? order?.business?.map?.((business : any) => business?.logo): order?.business?.logo,
+            logo: order?.business?.length > 1 ? order?.business?.map?.((business: any) => business?.logo) : order?.business?.logo,
             driver: order?.driver,
             products: order?.products,
             review: order?.review,
@@ -174,7 +174,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       handleClickOrder(order?.uuid)
       return
     }
-    if (order?.cart_group_id){
+    if (order?.cart_group_id) {
       onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
     } else {
       onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
@@ -189,6 +189,15 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     setConfirm({ ...confirm, open: false, title: null })
   }
 
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideFavorite = theme?.orders?.components?.favorite?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
+
   return (
     <>
       <CardAnimation
@@ -196,28 +205,26 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
         style={[styles.container]}
       >
         <InnerContainer>
-          {(!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
+          {!hideBusinessLogo && (!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
             <>
               {order?.business?.length > 1 ? (
                 <MultiLogosContainer>
-                  {order?.business?.map((business: any, i: number) => (
-                    <View key={business?.id}>
-                      {i > 1 ? (
-                        <>
-                          {console.log(order?.business?.length - 2)}
-                        <OText mRight={3}> + {order?.business?.length - 2}</OText>
-                        </>
-                      ) : (
-                        <Logo style={styles.logoWrapper} isMulti>
-                          <OIcon
-                            url={optimizeImage(business?.logo, 'h_300,c_limit')}
-                            src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
-                            style={styles.minilogo}
-                          />
-                        </Logo>
-                      )}
-                    </View>
+                  {order?.business?.map((business: any, i: number) => i < 2 && (
+                    <Logo
+                      isMulti
+                      key={business?.id}
+                      style={styles.logoWrapper}
+                    >
+                      <OIcon
+                        url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                        src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                        style={styles.minilogo}
+                      />
+                    </Logo>
                   ))}
+                  {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
+                    <OText mRight={3}> + {order?.business?.length - 2}</OText>
+                  )}
                 </MultiLogosContainer>
               ) : (
                 <Logo style={styles.logoWrapper}>
@@ -232,11 +239,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           )}
           <CardInfoWrapper>
             <ContentHeader>
-              <View style={{ flex: 1 }}>
-                <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-                  {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
-                </OText>
-              </View>
+              {(order?.business?.length > 1 && !hideOrderNumber) || (!order?.business?.length && !hideBusinessName) && (
+                <View style={{ flex: 1 }}>
+                  <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                    {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
+                  </OText>
+                </View>
+              )}
               {!!!pastOrders && (
                 <>
                   {isMessageView ? (
@@ -260,7 +269,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
               )}
               {!!pastOrders && (
                 <ButtonWrapper>
-                  {allowedOrderStatus.includes(parseInt(order?.status)) &&
+                  {!hideReviewOrderButton &&
+                    allowedOrderStatus.includes(parseInt(order?.status)) &&
                     !order.review && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
@@ -270,7 +280,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {order.cart && (
+                  {order.cart && !hideReorderButton && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}
@@ -290,7 +300,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
             <ContentFooter>
               <View style={{ flex: 1 }}>
                 <View style={styles.infoText}>
-                  {(!!!pastOrders || order?.business?.length > 1) && (
+                  {(!!!pastOrders || order?.business?.length > 1) && !hideOrderNumber && (
                     <>
                       <OText
                         size={10}
@@ -313,24 +323,32 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                       </OText>
                     </>
                   )}
+                  {!hideDate && (
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.textSecondary}
+                      style={{ marginVertical: 3 }}
+                      numberOfLines={1}>
+                      {
+                        pastOrders
+                          ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
+                          : order?.eta_time + 'min'
+                      }
+                    </OText>
+                  )}
+                </View>
+                {!hideOrderStatus && (
                   <OText
+                    color={theme.colors.primary}
                     size={10}
                     lineHeight={15}
-                    color={theme.colors.textSecondary}
-                    style={{ marginVertical: 3 }}
                     numberOfLines={1}>
-                    {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
+                    {getOrderStatus(order.status)?.value}
                   </OText>
-                </View>
-                <OText
-                  color={theme.colors.primary}
-                  size={10}
-                  lineHeight={15}
-                  numberOfLines={1}>
-                  {getOrderStatus(order.status)?.value}
-                </OText>
+                )}
               </View>
-              {!isMessageView && !order?.business?.length && (
+              {!isMessageView && !order?.business?.length && !hideFavorite && (
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}

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

@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
 	},
 	cardsList: {
 		width: '100%',
-		maxHeight: 130
+		maxHeight: 150
 	},
 })
 

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

@@ -1,252 +1,271 @@
 import React, { useState, useEffect } from 'react'
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
 import {
-	UpsellingPage as UpsellingPageController,
-	useUtils,
-	useLanguage,
-	useOrder
+  UpsellingPage as UpsellingPageController,
+  useUtils,
+  useLanguage,
+  useOrder,
+  useConfig
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OBottomPopup, OButton } from '../shared'
 import { UpsellingProductsParams } from '../../types'
 import {
-	Container,
-	UpsellingContainer,
-	Item,
-	Details,
-	AddButton,
-	TopBar,
-	TopActions
+  Container,
+  UpsellingContainer,
+  Item,
+  Details,
+  AddButton,
+  CartList,
+  CartDivider
 } from './styles'
 import { OrderSummary } from '../OrderSummary';
+import { Cart } from '../Cart';
 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 {
-		isCustomMode,
-		upsellingProducts,
-		business,
-		handleUpsellingPage,
-		handleCloseUpsellingPage,
-		openUpselling,
-		canOpenUpselling,
-		setCanOpenUpselling,
-		isFromCart,
-		onNavigationRedirect,
-		onGoBack
-	} = props
+  const {
+    isCustomMode,
+    upsellingProducts,
+    business,
+    handleUpsellingPage,
+    handleCloseUpsellingPage,
+    openUpselling,
+    canOpenUpselling,
+    setCanOpenUpselling,
+    isFromCart,
+    onNavigationRedirect,
+    onGoBack
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
 
-	const styles = StyleSheet.create({
-		imageStyle: {
-			width: 73,
-			height: 73,
-			resizeMode: 'cover',
-			borderRadius: 7.6,
-		},
-		closeUpsellingButton: {
-			borderRadius: 7.6,
-			borderColor: theme.colors.primary,
-			backgroundColor: theme.colors.primary,
-			borderWidth: 1,
-			alignSelf: 'center',
-			height: 44,
-			shadowOpacity: 0,
-			width: '80%',
-		},
-		cancelBtn: {
-			paddingHorizontal: 18,
-			borderWidth: 1,
-			borderRadius: 7.6,
-			borderColor: theme.colors.textSecondary,
-			height: 38
-		},
-		headerItem: {
-			flexDirection: 'row',
-			alignItems: 'center',
-			marginVertical: 2,
-			marginHorizontal: 20,
-		},
-		btnBackArrow: {
-			borderWidth: 0,
-			width: 26,
-			height: 26,
-			backgroundColor: theme.colors.clear,
-			borderColor: theme.colors.clear,
-			shadowColor: theme.colors.clear,
-			paddingLeft: 0,
-			paddingRight: 0,
-			marginLeft: 20,
-			marginBottom: 10
-		},
-	})
+  const styles = StyleSheet.create({
+    imageStyle: {
+      width: 73,
+      height: 73,
+      resizeMode: 'cover',
+      borderRadius: 7.6,
+    },
+    closeUpsellingButton: {
+      borderRadius: 7.6,
+      borderColor: theme.colors.primary,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 1,
+      alignSelf: 'center',
+      height: 44,
+      shadowOpacity: 0,
+      width: '80%',
+    },
+    cancelBtn: {
+      paddingHorizontal: 18,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: theme.colors.textSecondary,
+      height: 38
+    },
+    headerItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginVertical: 2,
+      marginHorizontal: 20,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 26,
+      height: 26,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginLeft: 20,
+      marginBottom: 10
+    },
+  })
 
-	const [modalIsOpen, setModalIsOpen] = useState(false)
-	const [{ carts }] = useOrder()
-	const [{ parsePrice }] = useUtils()
-	const [, t] = useLanguage()
-	const { bottom } = useSafeAreaInsets()
-	const [isCheckout, setIsCheckout] = useState(false)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [{ carts }] = useOrder()
+  const [{ parsePrice }] = useUtils()
+  const [{ configs }] = useConfig()
+  const [, t] = useLanguage()
+  const { bottom } = useSafeAreaInsets()
+  const [isCheckout, setIsCheckout] = useState(false)
+  const [isCartsLoading, setIsCartsLoading] = useState(false)
 
-	const cart = carts?.[`businessId:${props.businessId}`] ?? {}
-	const cartProducts = cart?.products?.length
-		? cart?.products.map((product: any) => product.id)
-		: []
+  const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const showCartList = isChewLayout
+  const commentDelayTime = isChewLayout ? 500 : null
 
-	const productsList = !upsellingProducts.loading && !upsellingProducts.error
-		? upsellingProducts?.products?.length
-			? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
-			: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-		: []
+  const cart = carts?.[`businessId:${props.businessId}`] ?? {}
+  const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
+  const cartProducts = cart?.products?.length
+    ? cart?.products.map((product: any) => product.id)
+    : []
 
-	useEffect(() => {
-		if (!isCustomMode && !props.products) {
-			if (!upsellingProducts.loading) {
-				if (upsellingProducts?.products?.length && !isFromCart) {
-					setCanOpenUpselling && setCanOpenUpselling(true)
-				} else {
-					handleUpsellingPage && handleUpsellingPage()
-				}
-			}
-		}
-	}, [upsellingProducts.loading, upsellingProducts?.products.length])
+  const productsList = !upsellingProducts.loading && !upsellingProducts.error
+    ? upsellingProducts?.products?.length
+      ? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+      : (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+    : []
 
-	const handleFormProduct = (product: any) => {
-		onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-			product: product,
-			businessId: product?.api?.businessId,
-			businessSlug: business.slug,
-		})
-	}
+  useEffect(() => {
+    if (!isCustomMode && !props.products) {
+      if (!upsellingProducts.loading) {
+        if (upsellingProducts?.products?.length && !isFromCart) {
+          setCanOpenUpselling && setCanOpenUpselling(true)
+        } else {
+          handleUpsellingPage && handleUpsellingPage()
+        }
+      }
+    }
+  }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	const UpsellingLayout = () => {
-		return (
-			<Container>
-				<UpsellingContainer
-					horizontal
-					showsHorizontalScrollIndicator={false}
-					contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
-				>
-					{
-						!upsellingProducts.loading && (
-							<>
-								{
-									!upsellingProducts.error ? productsList.map((product: any, i: number) => (
-										<Item key={`${product.id}_${i}`}>
-											<View style={{ flexBasis: '57%' }}>
-												<Details>
-													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
-													<OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
-												</Details>
-												<AddButton onPress={() => handleFormProduct(product)}>
-													<OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
-												</AddButton>
-											</View>
-											<View>
-												<OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
-											</View>
-										</Item>
-									)) : (
-										<OText>
-											{upsellingProducts.message}
-										</OText>
-									)
-								}
-							</>
-						)
-					}
-				</UpsellingContainer>
-			</Container>
-		)
-	}
+  const handleFormProduct = (product: any) => {
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+      product: product,
+      businessId: product?.api?.businessId,
+      businessSlug: business.slug,
+    })
+  }
 
-	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>
-				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
-					{productsList.length > 0 &&
-						<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-							<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-							<UpsellingLayout />
-						</View>
-					}
-					<View style={{ paddingHorizontal: 40 }}>
-						<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-						<OrderSummary
-							cart={cart}
-							isCartPending={cart?.status === 2}
-							onNavigationRedirect={onNavigationRedirect}
-						/>
-					</View>
-				</ScrollView>
-				<View
-					style={{
-						alignItems: 'center',
-						bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
-					}}
-				>
-					<OButton
-						imgRightSrc=''
-						text={t('CHECKOUT', 'Checkout')}
-						style={{ ...styles.closeUpsellingButton }}
-						textStyle={{ color: theme.colors.white, fontSize: 14 }}
-						onClick={() => {
-							handleUpsellingPage()
-							setIsCheckout(true)
-						}}
-					/>
-				</View>
-			</>
-		)
-	}
+  const UpsellingLayout = () => {
+    return (
+      <Container>
+        <UpsellingContainer
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
+        >
+          {
+            !upsellingProducts.loading && (
+              <>
+                {
+                  !upsellingProducts.error ? productsList.map((product: any, i: number) => (
+                    <Item key={`${product.id}_${i}`}>
+                      <View style={{ flexBasis: '57%' }}>
+                        <Details>
+                          <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
+                          <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
+                        </Details>
+                        <AddButton onPress={() => handleFormProduct(product)}>
+                          <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
+                        </AddButton>
+                      </View>
+                      <View>
+                        <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
+                      </View>
+                    </Item>
+                  )) : (
+                    <OText>
+                      {upsellingProducts.message}
+                    </OText>
+                  )
+                }
+              </>
+            )
+          }
+        </UpsellingContainer>
+      </Container>
+    )
+  }
 
-	return (
-		<>
-			{isCustomMode ? (
-				<UpsellingLayout />
-			) : (
-				<>
-					{props.isPage ? (
-						<UpsellingContent />
-					) : (
-						canOpenUpselling && !modalIsOpen && (
-							<OBottomPopup
-								title={''}
-								open={openUpselling}
-								onClose={() => handleUpsellingPage()}
-								isStatusBar
-							>
-								<UpsellingContent />
-							</OBottomPopup>
-						)
-					)}
-				</>
-			)}
-		</>
-	)
+  const UpsellingContent = () => {
+    return (
+      <>
+        <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 &&
+            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+              <UpsellingLayout />
+            </View>
+          }
+          <View style={{ paddingHorizontal: 40 }}>
+            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+            <OrderSummary
+              cart={cart}
+              commentDelayTime={commentDelayTime}
+              isCartPending={cart?.status === 2}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          </View>
+          {showCartList && cartList.map((cart: any, i: number) => (
+            <CartList key={i}>
+              <Cart
+                cart={cart}
+                cartuuid={cart.uuid}
+                hideUpselling
+                singleBusiness={props.singleBusiness}
+                isFranchiseApp={props.isFranchiseApp}
+                isCartsLoading={isCartsLoading}
+                setIsCartsLoading={setIsCartsLoading}
+                isMultiCheckout={isMultiCheckout}
+                onNavigationRedirect={props.onNavigationRedirect}
+              />
+              <CartDivider />
+            </CartList>
+          ))}
+        </ScrollView>
+        <View
+          style={{
+            alignItems: 'center',
+            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+          }}
+        >
+          <OButton
+            imgRightSrc=''
+            text={t('CHECKOUT', 'Checkout')}
+            style={{ ...styles.closeUpsellingButton }}
+            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            onClick={() => {
+              handleUpsellingPage()
+              setIsCheckout(true)
+            }}
+          />
+        </View>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {isCustomMode ? (
+        <UpsellingLayout />
+      ) : (
+        <>
+          {props.isPage ? (
+            <UpsellingContent />
+          ) : (
+            canOpenUpselling && !modalIsOpen && (
+              <OBottomPopup
+                title={''}
+                open={openUpselling}
+                onClose={() => handleUpsellingPage()}
+                isStatusBar
+              >
+                <UpsellingContent />
+              </OBottomPopup>
+            )
+          )}
+        </>
+      )}
+    </>
+  )
 }
 
 export const UpsellingProducts = (props: UpsellingProductsParams) => {
-	const upsellingProductsProps = {
-		...props,
-		UIComponent: UpsellingProductsUI
-	}
-	return (
-		<UpsellingPageController {...upsellingProductsProps} />
-	)
+  const upsellingProductsProps = {
+    ...props,
+    UIComponent: UpsellingProductsUI
+  }
+  return (
+    <UpsellingPageController {...upsellingProductsProps} />
+  )
 }

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

@@ -47,4 +47,15 @@ export const TopBar = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 44px;
 	justify-content: center;
-`;
+`;
+
+export const CartList = styled.ScrollView`
+  padding: 10px 40px;
+  overflow: visible;
+`
+
+export const CartDivider = styled.View`
+  height: 8px;
+  background-color:  ${(props: any) => props.theme.colors.backgroundGray100};
+  margin: 20px -40px 0;
+`

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

@@ -593,6 +593,8 @@ export interface UpsellingProductsParams {
 	products?: any;
 	onNavigationRedirect?: any;
 	onGoBack?: any;
+	singleBusiness?: any;
+	isFranchiseApp?: any;
 }
 
 export interface GoogleMapsParams {