ordering-ui-react-native 0.15.57 → 0.15.58-release

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
+import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
 	StyleSheet,
@@ -30,7 +31,8 @@ import {
 	ListWrapper,
 	FeaturedWrapper,
 	OrderProgressWrapper,
-	FarAwayMessage
+	FarAwayMessage,
+	AddressInputContainer
 } from './styles';
 
 import { SearchBar } from '../SearchBar';
@@ -47,7 +49,7 @@ import { getTypesText, convertToRadian } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 
-const PIXELS_TO_SCROLL = 1000;
+const PIXELS_TO_SCROLL = 2000;
 
 const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
@@ -59,7 +61,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-		businessId
+		businessId,
+		isGuestUser,
+		handleUpdateBusinessList
 	} = props;
 	const theme = useTheme();
 	const isFocused = useIsFocused();
@@ -81,7 +85,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		wrapperOrderOptions: {
 			width: '100%',
 			flexDirection: 'row',
-			justifyContent: 'space-between',
+			justifyContent: 'center',
 			marginBottom: 10,
 			zIndex: 100,
 		},
@@ -91,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,
@@ -101,6 +108,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		farAwayMsg: {
 			paddingVertical: 6,
 			paddingHorizontal: 20
+		},
+		inputContainerStyles: {
+			backgroundColor: theme.colors.white,
+			borderColor: theme.colors.backgroundGray,
+			borderWidth: 1,
 		}
 	});
 
@@ -116,11 +128,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		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 panResponder = useRef(
 	// 	PanResponder.create({
 	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
@@ -190,19 +204,35 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}
 
+	const checkUserLocation = async () => {
+		let trackingStatus = await getTrackingStatus()
+		if (trackingStatus === 'not-determined') {
+			trackingStatus = await requestTrackingPermission()
+		}
+		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+			Geolocation.getCurrentPosition((pos) => {
+				const crd = pos.coords
+				const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+				if (distance > 20) setIsFarAway(true)
+				else setIsFarAway(false)
+			}, (err) => {
+				console.log(`ERROR(${err.code}): ${err.message}`)
+			}, {
+				enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+			})
+		}
+	}
+
 	useEffect(() => {
-		Geolocation.getCurrentPosition((pos) => {
-			const crd = pos.coords
-			const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-			if (distance > 20) setIsFarAway(true)
-			else setIsFarAway(false)
-		}, (err) => {
-			console.log(`ERROR(${err.code}): ${err.message}`)
-		}, {
-			enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-		})
+		checkUserLocation()
 	}, [orderState?.options?.address?.location])
 
+	useEffect(() => {
+		if (!orderState?.loading) {
+			setOrderTypeValue(orderState?.options?.type)
+		}
+	}, [orderState?.options?.type])
+
 	useFocusEffect(
 		useCallback(() => {
 			resetInactivityTimeout()
@@ -210,6 +240,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}, [navigation])
 	)
 
+	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])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
@@ -219,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={() =>
@@ -236,17 +269,25 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								: navigation.navigate('AddressForm', {
 									address: orderState.options?.address,
 									isFromBusinesses: true,
+									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 && (
@@ -255,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 })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderState?.options?.type || 1), 'Delivery')}</OText>
-							<OIcon
-								src={theme.images.general.arrow_down}
-								width={10}
-								style={{ marginStart: 8 }}
-							/>
-						</WrapMomentOption>
 						{isPreOrderSetting && (
 							<WrapMomentOption
 								onPress={() => handleMomentClick()}>
@@ -273,7 +307,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									numberOfLines={1}
 									ellipsizeMode="tail"
 									color={theme.colors.textSecondary}>
-									{orderState.options?.momentß
+									{orderState.options?.moment
 										? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
@@ -286,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={configs?.advanced_business_search_enabled?.value === '1' || !businessTypes}
-								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-								onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
+						<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}
@@ -325,7 +380,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
-										key={bAry[0].id}
 										business={bAry[0]}
 										isBusinessOpen={bAry[0]?.open}
 										handleCustomClick={handleBusinessClick}
@@ -333,7 +387,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									/>
 									{bAry.length > 1 && (
 										<BusinessFeaturedController
-											key={bAry[1].id}
 											business={bAry[1]}
 											isBusinessOpen={bAry[1]?.open}
 											handleCustomClick={handleBusinessClick}
@@ -349,7 +402,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			{
 				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+					<HighestRatedBusinesses
+						onBusinessClick={handleBusinessClick}
+						navigation={navigation}
+						favoriteIds={favoriteIds}
+						setFavoriteIds={setFavoriteIds}
+					/>
 				)
 			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
@@ -372,9 +430,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)}
 				{businessesList.businesses?.map(
-					(business: any) => (
+					(business: any, i: number) => (
 						<BusinessController
-							key={business.id}
+							key={`${business.id}_` + i}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -388,6 +446,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							businessDeliveryTime={business?.delivery_time}
 							businessPickupTime={business?.pickup_time}
 							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
 						/>
 					)
 				)}

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

@@ -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,17 +98,23 @@ 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 = () => {
-    if (cart?.taxes === null) {
+    if (cart?.taxes === null || !cart?.taxes) {
       return cart.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
@@ -162,13 +170,14 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
+        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) => (
+        {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
-            key={product.code}
+            key={`${product.code}_${i}`}
             isCartPending={isCartPending}
             isCartProduct
             product={product}
@@ -202,8 +211,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
-                <OSTable key={offer.id}>
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+                <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
                     {offer.rate_type === 1 && (
@@ -234,8 +243,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
-                <OSTable key={tax.id}>
+              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+                <OSTable key={`${tax.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1} >
                       {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -250,12 +259,12 @@ const CartUI = (props: any) => {
               ))
             }
             {
-              cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                <OSTable key={fee?.id}>
+              cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                <OSTable key={`${fee.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
@@ -293,8 +302,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
-                <OSTable key={offer.id}>
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
+                <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
                     {offer.rate_type === 1 && (
@@ -409,30 +418,40 @@ 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>
+        {!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>
 
       <OModal
-        open={openChangeStore && props.isFranchiseApp}
+        open={openChangeStore}
         entireModal
         customClose
         onClose={() => setOpenChangeStore(false)}