ordering-ui-react-native 0.17.76 → 0.17.77-release

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

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking, Pressable, Image } from 'react-native';
 import FastImage from 'react-native-fast-image'
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
@@ -21,7 +21,6 @@ import {
 	BusinessInfo,
 	BusinessInfoItem,
 	WrapReviews,
-	WrapBusinessInfo,
 	TitleWrapper,
 	RibbonBox,
 	SocialListWrapper
@@ -46,15 +45,24 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	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 [imageRealSize, setImageRealSize] = useState({ width: 16, height: 9, loading: true })
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	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: {
 			height: 150,
 		},
 		headerStyle: {
-			height: isChewLayout ? 170 : 260,
+			aspectRatio: imageRealSize?.width / imageRealSize?.height
 		},
 		logoStyle: {
 			width: 72,
@@ -93,11 +101,11 @@ export const BusinessBasicInformation = (
 			borderRadius: 3,
 			borderColor: theme.colors.border,
 			borderWidth: isChewLayout ? 0 : 1,
-			width: 20,
-			height: 20,
+			width: 30,
+			height: 30,
 			justifyContent: 'center',
 			alignItems: 'center',
-			marginRight: 5,
+			marginRight: 10,
 			marginBottom: 7
 		},
 		tiktokIcon: {
@@ -138,7 +146,7 @@ export const BusinessBasicInformation = (
 	}
 
 	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
+		if (Object.keys(business || {}).length <= 0) return t('GENERAL', 'General');
 		const _types: any = [];
 		types.forEach(
 			(type) =>
@@ -158,7 +166,7 @@ export const BusinessBasicInformation = (
 				<MaterialComIcon
 					name={iconTitle}
 					color={isChewLayout ? theme.colors.black : theme.colors.textNormal}
-					size={isChewLayout ? 18 : 14}
+					size={isChewLayout ? 25 : 22}
 				/>
 			</TouchableOpacity>
 		)
@@ -188,6 +196,20 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
+	useEffect(() => {
+		const bannerImage = header || businessState?.business?.header
+		if (!bannerImage) {
+			setImageRealSize({ width: 16, height: 9, loading: false })
+			return
+		}
+		Image.getSize(bannerImage, (width: number, height: number) => {
+			setImageRealSize({ width: width, height: height, loading: false });
+		  }, (error: any) => {
+			setImageRealSize({ ...imageRealSize, loading: false });
+			console.log(error);
+		  });
+	}, [header, businessState?.business?.header])
+
 	const SocialIcons = () => {
 		return (
 			<>
@@ -249,9 +271,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,61 +289,68 @@ 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 && !imageRealSize?.loading && {
+						source: (header || businessState?.business?.header || typeof theme?.images?.dummies?.businessHeader === 'string') ? {
+							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header || theme?.images?.dummies?.businessHeader
+						} : theme?.images?.dummies?.businessHeader
+					})}
+					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
+				>
+					{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 ?
-								<FastImage
-									style={styles.logoStyle}
-									source={{
-										uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit'),
-										priority: FastImage.priority.high,
-										cache: FastImage.cacheControl.web
-									}}
-									resizeMode={FastImage.resizeMode.contain}
-								/>
-								:
-								<OIcon
-									src={theme?.images?.dummies?.businessLogo}
-									style={styles.logoStyle}
-								/>
+							<>
+								{loading ? (
+									<View style={styles.logoStyle}>
+										<Placeholder Animation={Fade}>
+											<PlaceholderLine height={72} style={{ borderRadius: 8 }} />
+										</Placeholder>
+									</View>
+								) : (
+									logo || businessState?.business?.logo || typeof theme.images.dummies.businessLogo === 'string' ?
+										<FastImage
+											style={styles.logoStyle}
+											source={{
+												uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit') || theme.images.dummies.businessLogo,
+												priority: FastImage.priority.high,
+												cache: FastImage.cacheControl.web
+											}}
+											resizeMode={FastImage.resizeMode.contain}
+										/>
+										:
+										<OIcon
+											src={theme?.images?.dummies?.businessLogo}
+											style={styles.logoStyle}
+										/>
+								)}
+							</>
 						)}
 					</BusinessLogo>
 				)}
@@ -341,13 +370,15 @@ export const BusinessBasicInformation = (
 									{business?.ribbon?.enabled && (
 										<RibbonBox
 											bgColor={business?.ribbon?.color}
+											colorText={lightenDarkenColor(business?.ribbon?.color)}
+											borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 											isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 											isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 										>
 											<OText
 												size={10}
 												weight={'400'}
-												color={theme.colors.white}
+												color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 												numberOfLines={2}
 												ellipsizeMode='tail'
 												lineHeight={13}
@@ -384,34 +415,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 +460,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 +471,32 @@ 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>
+											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+										</>
+									)}
+
+									{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
+										<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
+											<OText
+												color={theme.colors.primary}
+												style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+												size={12}
+											>
+												{t('INFORMATION', 'Information')}
+											</OText>
+										</TouchableOpacity>
+									)}
 								</>
 							)}
 						</WrapReviews>

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

@@ -8,9 +8,6 @@ export const BusinessContainer = styled.View`
 export const BusinessHeader = styled.ImageBackground`
   width: 100%;
   position: relative;
-  max-height: 258px;
-  height: 258px;
-  resize-mode: cover;
 `;
 export const BusinessLogo = styled.View`
   position: absolute;
@@ -36,25 +33,18 @@ export const WrapReviews = styled.View`
   align-items: center;
   justify-content: flex-start;
 `;
-export const WrapBusinessInfo = styled.TouchableOpacity`
-  position: absolute;
-  top: 16px;
-  end: 39px;
-`;
 
 export const TitleWrapper = styled.View`
   width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
 `
 
 export const RibbonBox = styled.View`
-  margin-left: 5px;
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
   align-self: flex-start;
+  margin-bottom: 5px;
 
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
@@ -67,6 +57,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SocialListWrapper = styled.ScrollView`

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

@@ -11,10 +11,11 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	BusinessHero,
@@ -41,7 +42,6 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		navigation,
 		isBusinessOpen,
 		style,
-		isCustomLayout,
 		businessHeader,
 		businessFeatured,
 		businessLogo,
@@ -65,7 +65,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const windowHeight = Dimensions.get('window').height
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
-	const textSize = isCustomLayout ? 12 : 10
+	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 = 12
 	const cardHeight = windowHeight * 0.3
 
 	const styles = StyleSheet.create({
@@ -141,8 +151,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		return _types.join(', ');
 	};
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleBusinessClick = (selectedBusiness: any) => {
-		Vibration.vibrate()
+		vibrateApp()
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
 			if (configState?.configs?.preorder_status_enabled?.value === '1') {
@@ -175,13 +193,15 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					{business?.ribbon?.enabled && (
 						<RibbonBox
 							bgColor={business?.ribbon?.color}
+							colorText={lightenDarkenColor(business?.ribbon?.color)}
+							borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 						>
 							<OText
 								size={10}
 								weight={'400'}
-								color={theme.colors.white}
+								color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 								numberOfLines={2}
 								ellipsizeMode='tail'
 								lineHeight={13}
@@ -191,32 +211,38 @@ 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: cardHeight * 0.66 }}
+								source={(businessHeader || business?.header || typeof theme.images.dummies.businessHeader === 'string') ? {
+									uri: optimizeImage(businessHeader || business?.header || theme.images.dummies.businessHeader, '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) && (
+						{!hideBusinessOffer && (
 							getBusinessOffer((business?.offers)) &&
-							<OfferBox>
+							<OfferBox
+								isClosed={!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1')}
+								isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}
+							>
 								<OText
 									size={10}
 									weight={'400'}
+									color={theme.colors.textThird}
 									numberOfLines={2}
 									ellipsizeMode='tail'
 									lineHeight={13}
 								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
 							</OfferBox>
 						)}
-						<BusinessState>
+						<BusinessState isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}>
 							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 								<View style={styles.businessStateView}>
 									<OText
@@ -230,49 +256,30 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</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 && (
-								<ReviewAndFavorite>
-									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-										<Reviews>
-											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-											<OText size={10} style={{ lineHeight: 15 }}>
-												{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-											</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}
+						<BusinessInfo style={{ position: 'absolute', bottom: 85, left: 15 }}>
+							{!hideBusinessLogo && (
+								<BusinessLogo style={styles.businessLogo}>
+									<FastImage
+										style={{ width: 56, height: 56 }}
+										source={(businessLogo || business?.logo || typeof theme.images.dummies.businessLogo === 'string') ? {
+											uri: optimizeImage(businessLogo || business?.logo || theme.images.dummies.businessLogo, 'h_150,c_limit'),
+											priority: FastImage.priority.normal,
+										} : theme.images.dummies.businessLogo}
+										resizeMode={FastImage.resizeMode.cover}
 									/>
-								</ReviewAndFavorite>
+								</BusinessLogo>
 							)}
 						</BusinessInfo>
-						<View style={isCustomLayout && { width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
 							<OText
 								size={textSize + 2}
 								style={{ lineHeight: 18, marginBottom: 6 }}
 								weight={'500'}>
 								{business?.name}
 							</OText>
-							{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,19 +287,21 @@ 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.5 : 0}
+											toValue={business?.favorite ? 0 : 0.5}
+											disableAnimation={!auth}
+											iconProps={{ color: theme.colors.danger5, size: 18 }}
+											isActive={business?.favorite}
+										/>
+									)}
 								</ReviewAndFavorite>
 							)}
 						</View>
-						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={isCustomLayout ? 1 : 2}>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={1}>
 							{business?.address}
 						</OText>
 						<Metadata>
@@ -304,17 +313,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>