ordering-ui-react-native 0.17.85 → 0.17.87

package/package.json

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

package/themes/business/src/components/MapView/index.tsx

@@ -103,7 +103,7 @@ const MapViewComponent = (props: MapViewParams) => {
     return () => {
       stopFollowUserLocation();
     };
-  }, []);
+  }, [isFocused]);
 
   useFocusEffect(
     useCallback(() => {
@@ -252,7 +252,7 @@ const MapViewComponent = (props: MapViewParams) => {
                     orderIds={marker.map((order: any) => order.id).join(', ')}
                   />
                 ))}
-                {Object.values(customerMarkerGroups).map((marker: any) =>  (
+                {Object.values(customerMarkerGroups).map((marker: any) => (
                   <RenderMarker
                     key={marker[0]?.customer_id}
                     marker={marker[0]}

package/themes/business/src/components/ProductItemAccordion/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { View, Animated } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -36,6 +36,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [{ parsePrice }] = useUtils();
 
   const [isActive, setActiveState] = useState(false);
+  const [isReadMore, setIsReadMore] = useState(false);
+  const [lengthMore, setLengthMore] = useState(false);
 
   const productInfo = () => {
     if (isCartProduct) {
@@ -108,6 +110,10 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     }
   }, []);
 
+  const onTextLayout = useCallback((e: any) => {
+    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+  },[]);
+
   return (
     <AccordionSection>
       <Accordion
@@ -288,9 +294,21 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                   color={theme.colors.unselectText}>
                   {t('COMMENT', 'Comment')}
                 </OText>
-                <OText size={12} mLeft={10} style={{ width: '100%' }} color={theme.colors.unselectText}>
+                <OText
+                  size={12}
+                  style={{ width: '100%', paddingLeft: 10 }}
+                  color={theme.colors.unselectText}
+                  onTextLayout={onTextLayout}
+                  numberOfLines={isReadMore ? 15 : 2}
+                  ellipsizeMode="tail"
+                >
                   {product.comment}
                 </OText>
+                {lengthMore && (
+                  <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)} style={{ marginLeft: 10 }}>
+                    <OText size={10} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+                  </TouchableOpacity>
+                )}
               </ProductComment>
             )}
           </AccordionContent>

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

@@ -160,6 +160,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
 	const countryCode = configState?.configs?.country_autocomplete?.value
+	const isHideMap = theme?.address?.components?.map?.hidden
+	const isHideIcons = theme?.address?.components?.icons?.hidden
 	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
@@ -631,7 +633,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									)}
 							</AutocompleteInput>
 
-							{(locationChange || formState.changes?.location) && (
+							{!isHideMap && (locationChange || formState.changes?.location) && (
 								<View
 									style={{
 										height: 189,
@@ -789,27 +791,29 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 							)}
 						</FormInput>
-						<IconsContainer>
-							{tagsName.map((tag) => (
-								<TouchableOpacity
-									key={tag.value}
-									onPress={() => handleAddressTag(tag.value)}>
-									<View
-										style={{
-											...styles.iconContainer,
-										}}>
-										<OIcon
-											src={tag.icon}
-											width={24}
-											color={
-												addressTag === tag.value ?
-													theme.colors.primary : theme.colors.disabled
-											}
-										/>
-									</View>
-								</TouchableOpacity>
-							))}
-						</IconsContainer>
+						{!isHideIcons && (
+							<IconsContainer>
+								{tagsName.map((tag) => (
+									<TouchableOpacity
+										key={tag.value}
+										onPress={() => handleAddressTag(tag.value)}>
+										<View
+											style={{
+												...styles.iconContainer,
+											}}>
+											<OIcon
+												src={tag.icon}
+												width={24}
+												color={
+													addressTag === tag.value ?
+														theme.colors.primary : theme.colors.disabled
+												}
+											/>
+										</View>
+									</TouchableOpacity>
+								))}
+							</IconsContainer>
+						)}
 					</View>
 
 					<View>

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

@@ -47,7 +47,15 @@ export const BusinessBasicInformation = (
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
-	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+	const hideTime = theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+	const hideReviews = theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+	const hideReviewsPopup = theme?.business_view?.components?.header?.components?.reviews?.hidden
+	const hideDistance = theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+	const hideInfoIcon = theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+	const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
+	const hideHeader = theme?.business_view?.components?.header?.hidden
 
 	const styles = StyleSheet.create({
 		businesInfoheaderStyle: {
@@ -249,9 +257,9 @@ export const BusinessBasicInformation = (
 								iconTitle='snapchat'
 							/>
 						)}
-						{isChewLayout && (
+						{isChewLayout && !hideInfoIcon && (
 							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
-								<OText 
+								<OText
 									color={theme.colors.primary}
 									style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
 									size={12}
@@ -267,44 +275,46 @@ export const BusinessBasicInformation = (
 	}
 
 	return (
-		<BusinessContainer isChewLayout={isChewLayout && !showLogo}>
-			<BusinessHeader
-				isChewLayout={isChewLayout}
-				style={
-					isBusinessInfoShow
-						? styles.businesInfoheaderStyle
-						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
-				}
-				{...(!loading && {
-					source: (header || businessState?.business?.header) ? {
-						uri: header || optimizeImage(businessState?.business?.header, 'h_250,c_limit')
-					} : theme?.images?.dummies?.businessHeader
-				})}
-				imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
-			>
-				{!isBusinessInfoShow && !isChewLayout && (
-					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
-						<OIcon src={theme.images.general.info} width={24} />
-					</WrapBusinessInfo>
-				)}
-				{isChewLayout && !loading && (
-					<View style={styles.headerChewStyle}>
-						<OText size={24} weight={'600'} mBottom={-5}>
-							{business?.name}
-						</OText>
-						{business?.city?.name && (
-							<OText>
-								{business?.city?.name}
+		<BusinessContainer isChewLayout={isChewLayout && hideLogo}>
+			{!hideHeader && (
+				<BusinessHeader
+					isChewLayout={isChewLayout}
+					style={
+						isBusinessInfoShow
+							? styles.businesInfoheaderStyle
+							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
+					}
+					{...(!loading && {
+						source: (header || businessState?.business?.header) ? {
+							uri: header || optimizeImage(businessState?.business?.header, 'h_250,c_limit')
+						} : theme?.images?.dummies?.businessHeader
+					})}
+					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
+				>
+					{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
+						<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
+							<OIcon src={theme.images.general.info} width={24} />
+						</WrapBusinessInfo>
+					)}
+					{isChewLayout && !loading && (
+						<View style={styles.headerChewStyle}>
+							<OText size={24} weight={'600'} mBottom={-5}>
+								{business?.name}
 							</OText>
-						)}
-						<View style={styles.socialIconsChewContainer}>
-							<SocialIcons />
+							{business?.city?.name && !hideCity && (
+								<OText>
+									{business?.city?.name}
+								</OText>
+							)}
+							<View style={styles.socialIconsChewContainer}>
+								<SocialIcons />
+							</View>
 						</View>
-					</View>
-				)}
-			</BusinessHeader>
+					)}
+				</BusinessHeader>
+			)}
 			<BusinessInfo style={styles.businessInfo}>
-				{showLogo && (
+				{!hideLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
 							logo || businessState?.business?.logo ?
@@ -384,34 +394,43 @@ export const BusinessBasicInformation = (
 									</Placeholder>
 								)}
 								<View style={styles.bullet}>
-									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-										{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
-									</OText>
-									{orderState?.options?.type === 1 ? (
+									{!hideDeliveryFee && (
 										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-											{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+											{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
 										</OText>
-									) : (
+									)}
+									{!hideTime && (
+										<>
+											{orderState?.options?.type === 1 ? (
+												<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+													{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+												</OText>
+											) : (
+												<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+													{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+												</OText>
+											)}
+										</>
+									)}
+									{!hideDistance && (
 										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-											{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+											{parseDistance(business?.distance || 0) + `  \u2022 `}
 										</OText>
 									)}
-									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-										{parseDistance(business?.distance || 0) + `  \u2022 `}
-									</OText>
-								</View>
-
-								<View style={styles.reviewStyle}>
-									<OIcon
-										src={theme.images.general.star}
-										width={14}
-										color={theme.colors.textSecondary}
-										style={{ marginTop: -2, marginEnd: 2 }}
-									/>
-									<OText size={12} color={theme.colors.textSecondary}>
-										{business?.reviews?.total}
-									</OText>
 								</View>
+								{!hideReviews && (
+									<View style={styles.reviewStyle}>
+										<OIcon
+											src={theme.images.general.star}
+											width={14}
+											color={theme.colors.textSecondary}
+											style={{ marginTop: -2, marginEnd: 2 }}
+										/>
+										<OText size={12} color={theme.colors.textSecondary}>
+											{business?.reviews?.total}
+										</OText>
+									</View>
+								)}
 							</BusinessInfoItem>
 						</View>
 						<WrapReviews>
@@ -420,7 +439,7 @@ export const BusinessBasicInformation = (
 									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
 										<>
 											<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-												<OText 
+												<OText
 													color={theme.colors.primary}
 													style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
 													size={12}
@@ -431,15 +450,17 @@ export const BusinessBasicInformation = (
 											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 										</>
 									)}
-									<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
-										<OText
-											color={theme.colors.primary}
-											style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
-											size={12}
-										>
-											{t('REVIEWS', 'Reviews')}
-										</OText>
-									</TouchableOpacity>
+									{!hideReviewsPopup && (
+										<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
+											<OText
+												color={theme.colors.primary}
+												style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+												size={12}
+											>
+												{t('REVIEWS', 'Reviews')}
+											</OText>
+										</TouchableOpacity>
+									)}
 								</>
 							)}
 						</WrapReviews>

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

@@ -65,6 +65,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const windowHeight = Dimensions.get('window').height
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
+	const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
+	const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
+	const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden
+	const hideBusinessDistance = theme?.business_listing_view?.components?.business?.components?.distance?.hidden
+	const hideBusinessReviews = theme?.business_listing_view?.components?.business?.components?.reviews?.hidden
+	const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
+	const hideBusinessOffer = theme?.business_listing_view?.components?.business?.components?.offer?.hidden
+	const hideBusinessHeader = theme?.business_listing_view?.components?.business?.components?.header?.hidden
+	const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden
+
 	const textSize = isCustomLayout ? 12 : 10
 	const cardHeight = windowHeight * 0.3
 
@@ -191,20 +201,22 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
-						<FastImage
-							style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
-							source={(businessHeader || business?.header) ? {
-								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
-								priority: FastImage.priority.normal,
-							} : theme.images.dummies.businessHeader}
-							resizeMode={FastImage.resizeMode.cover}
-						/>
-						{(businessFeatured ?? business?.featured) && (
+						{!hideBusinessHeader && (
+							<FastImage
+								style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
+								source={(businessHeader || business?.header) ? {
+									uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
+									priority: FastImage.priority.normal,
+								} : theme.images.dummies.businessHeader}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						)}
+						{(businessFeatured ?? business?.featured) && !hideBusinessFavoriteBadge && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
-						{(!isCustomLayout) && (
+						{(!isCustomLayout) && !hideBusinessOffer && (
 							getBusinessOffer((business?.offers)) &&
 							<OfferBox>
 								<OText
@@ -231,19 +243,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</BusinessHero>
 					<BusinessContent>
 						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
-							<BusinessLogo style={styles.businessLogo}>
-								<FastImage
-									style={{ width: 56, height: 56 }}
-									source={(businessLogo || business?.logo) ? {
-										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
-										priority: FastImage.priority.normal,
-									} : theme.images.dummies.businessLogo}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							</BusinessLogo>
-							{!isCustomLayout && (
+							{!hideBusinessLogo && (
+								<BusinessLogo style={styles.businessLogo}>
+									<FastImage
+										style={{ width: 56, height: 56 }}
+										source={(businessLogo || business?.logo) ? {
+											uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+											priority: FastImage.priority.normal,
+										} : theme.images.dummies.businessLogo}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</BusinessLogo>
+							)}
+							{!isCustomLayout && (!hideBusinessFavorite || !hideBusinessReviews) && (
 								<ReviewAndFavorite>
-									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
 										<Reviews>
 											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
 											<OText size={10} style={{ lineHeight: 15 }}>
@@ -251,15 +265,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 											</OText>
 										</Reviews>
 									)}
-									<LottieAnimation
-										type='favorite'
-										onClick={handleChangeFavorite}
-										initialValue={business?.favorite ? 0.75 : 0}
-										toValue={business?.favorite ? 0 : 0.75}
-										disableAnimation={!auth}
-										iconProps={{ color: theme.colors.danger5, size: 18 }}
-										isActive={business?.favorite}
-									/>
+									{!hideBusinessFavorite && (
+										<LottieAnimation
+											type='favorite'
+											onClick={handleChangeFavorite}
+											initialValue={business?.favorite ? 0.75 : 0}
+											toValue={business?.favorite ? 0 : 0.75}
+											disableAnimation={!auth}
+											iconProps={{ color: theme.colors.danger5, size: 18 }}
+											isActive={business?.favorite}
+										/>
+									)}
 								</ReviewAndFavorite>
 							)}
 						</BusinessInfo>
@@ -270,9 +286,9 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								weight={'500'}>
 								{business?.name}
 							</OText>
-							{isCustomLayout && (
+							{isCustomLayout && (!hideBusinessFavorite || !hideBusinessReviews) && (
 								<ReviewAndFavorite>
-									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
 										<Reviews>
 											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
 											<OText size={10} style={{ lineHeight: 15 }}>
@@ -280,15 +296,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 											</OText>
 										</Reviews>
 									)}
-									<LottieAnimation
-										type='favorite'
-										onClick={handleChangeFavorite}
-										initialValue={business?.favorite ? 0.75 : 0}
-										toValue={business?.favorite ? 0 : 0.75}
-										disableAnimation={!auth}
-										iconProps={{ color: theme.colors.danger5, size: 18 }}
-										isActive={business?.favorite}
-									/>
+									{!hideBusinessFavorite && (
+										<LottieAnimation
+											type='favorite'
+											onClick={handleChangeFavorite}
+											initialValue={business?.favorite ? 0.75 : 0}
+											toValue={business?.favorite ? 0 : 0.75}
+											disableAnimation={!auth}
+											iconProps={{ color: theme.colors.danger5, size: 18 }}
+											isActive={business?.favorite}
+										/>
+									)}
 								</ReviewAndFavorite>
 							)}
 						</View>
@@ -304,17 +322,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</View>
 							) : (
 								<View style={styles.bullet}>
-									{orderState?.options?.type === 1 && (
+									{orderState?.options?.type === 1 && !hideBusinessFee && (
 										<OText size={textSize} color={theme.colors.textSecondary}>
 											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 										</OText>
 									)}
-									<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-										orderState?.options?.type === 1
-											? (businessDeliveryTime ?? business?.delivery_time)
-											: (businessPickupTime ?? business?.pickup_time),
-									)} \u2022 `}</OText>
-									<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									{!hideBusinessTime && (
+										<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+											orderState?.options?.type === 1
+												? (businessDeliveryTime ?? business?.delivery_time)
+												: (businessPickupTime ?? business?.pickup_time),
+										)} \u2022 `}</OText>
+									)}
+									{!hideBusinessDistance && (
+										<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									)}
 								</View>
 							)}
 						</Metadata>

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

@@ -85,7 +85,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 	const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
-
+	const backgroundColor = theme?.business_view?.components?.style?.backgroundColor
 	const styles = StyleSheet.create({
 		mainContainer: {
 			flex: 1
@@ -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 = () => {
@@ -314,7 +302,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	return (
 		<>
-			<View style={{ flex: 1 }}>
+			<View style={{ flex: 1, backgroundColor: backgroundColor }}>
 				<Animated.View style={{ position: 'relative' }}>
 					<TopHeader
 						style={{
@@ -460,7 +448,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							/>
 						</ProfessionalFilterWrapper>
 					)}
-					<PageBanner position='app_business_page' />
+					<PageBanner position='app_business_page' navigation={navigation} />
 					<View
 						style={{
 							height: 8,