ordering-ui-react-native 0.17.36 → 0.17.37-release

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

@@ -1,14 +1,49 @@
 import React, { useEffect, useState } from 'react';
-import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
-import { useEvent, useConfig } from 'ordering-components/native';
+import {
+  createClient,
+  AnalyticsProvider
+} from '@segment/analytics-react-native';
+import { useEvent, useConfig, useLanguage } from 'ordering-components/native';
 
 export const AnalyticsSegment = (props: any) => {
   const { children } = props
 
   const [events] = useEvent()
   const [configState] = useConfig()
+  const [, t] = useLanguage()
   const [segmentClient, setSegmentClient] = useState<any>({})
 
+  const handleProductsSearched = (query: any) => {
+    segmentClient.track('Products Searched', {
+      query: query
+    })
+  }
+
+  const handleProductListViewed = (category: any) => {
+    segmentClient.track('Product List Viewed', {
+      business_id: category?.business_id,
+      category_id: category?.id,
+      category: category?.name,
+      products: category?.products
+    })
+  }
+
+  const handlePromotionViewed = (promotion: any) => {
+    segmentClient.track('Promotion Viewed', {
+      promotion_id: (promotion?.id || '').toString(),
+      name: promotion.name,
+      position: promotion.position
+    })
+  }
+
+  const handlePromotionClicked = (promotion: any) => {
+    segmentClient.track('Promotion Clicked', {
+      promotion_id: (promotion?.id || '').toString(),
+      name: promotion.name,
+      position: promotion.position
+    })
+  }
+
   const handleClickProduct = (product: any) => {
     segmentClient.track('Product Clicked', {
       id: product.id,
@@ -18,6 +53,15 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleProductViewed = (product: any) => {
+    segmentClient.track('Product Viewed', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price
+    })
+  }
+
   const handleProductAdded = (product: any) => {
     segmentClient.track('Product Added', {
       id: product.id,
@@ -38,6 +82,23 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleCartViewed = (cart: any) => {
+    segmentClient.track('Cart Viewed', {
+      id: cart.uuid,
+      products: cart?.products
+    })
+  }
+
+  const handleCheckoutStarted = (cart: any) => {
+    segmentClient.track('Checkout Started', {
+      cart_id: cart?.uuid,
+      affiliation: cart?.business?.name,
+      revenue: cart?.total,
+      tax: cart?.tax_total,
+      shipping: cart?.delivery_zone_price
+    })
+  }
+
   const handleOrderPlaced = (order: any) => {
     segmentClient.track('Order Placed', {
       id: order.id,
@@ -65,6 +126,35 @@ export const AnalyticsSegment = (props: any) => {
       tax: order.tax_total,
       shipping: order.delivery_zone_price
     })
+
+    if (order?.history?.length) {
+      const lasthistory = order.history[order.history.length - 1]
+      if (lasthistory?.data) {
+        lasthistory.data.forEach(item => {
+          if (item.attribute === 'status') {
+            if (item.new === 15) {
+              segmentClient.track('Order Completed', {
+                id: order.id,
+                affiliation: order.business?.name,
+                revenue: order.total,
+                tax: order.tax_total,
+                shipping: order.delivery_zone_price
+              })
+            }
+            const orderCancelled = [2, 5, 6, 10, 12, 16, 17]
+            if (orderCancelled.includes(item.new)) {
+              segmentClient.track('Order Cancelled', {
+                id: order.id,
+                affiliation: order.business?.name,
+                revenue: order.total,
+                tax: order.tax_total,
+                shipping: order.delivery_zone_price
+              })
+            }
+          }
+        })
+      }
+    }
   }
 
   const handleAddOrder = (order: any) => {
@@ -77,6 +167,51 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleCouponEntered = (cart: any) => {
+    segmentClient.track('Coupon Entered', {
+      cart_id: cart.uuid,
+      coupon: cart.coupon
+    })
+  }
+
+  const handleCouponApplied = (cart: any) => {
+    const coupon: any = cart?.offers?.find(offer => offer.type === 2)
+    if (coupon) {
+      segmentClient.track('Coupon Applied', {
+        cart_id: cart.uuid,
+        coupon_id: coupon.id,
+        coupon_name: coupon?.name,
+        discount: coupon?.summary?.discount
+      })
+    }
+  }
+
+  const handleCouponDenied = (coupon: any) => {
+    segmentClient.track('Coupon Denied', {
+      business_id: coupon.business_id,
+      coupon: coupon.coupon,
+      user_id: coupon?.user_id,
+      reason: typeof coupon.reason === 'string' ? t(coupon.reason) : t(coupon.reason[0])
+    })
+  }
+
+  const handleCouponRemoved = (coupon: any) => {
+    segmentClient.track('Coupon Removed', {
+      business_id: coupon.business_id,
+      coupon_id: coupon.offer_id,
+    })
+  }
+
+  const handleProductReviewed = (products: any) => {
+    products.forEach((product: any) => {
+      segmentClient.track('Product Reviewed', {
+        product_id: product.product_id,
+        review_body: product.comment,
+        rating: product.qualification
+      })
+    })
+  }
+
   const handleLogin = (data: any) => {
     segmentClient.identify(data.id, {
       email: data.email,
@@ -84,25 +219,74 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleProductAddedToWishlist = (product: any) => {
+    segmentClient.track('Product Added to Wishlist', product)
+  }
+
+  const handleProductRemovedFromWishlist = (product: any) => {
+    segmentClient.track('Product Removed from Wishlist', product)
+  }
+
+  const handleWishlistProductAddedToCart = (product: any, result: any) => {
+    segmentClient.track('Wishlist Product Added to Cart', {
+      cart_id: result.uuid,
+      product_id: product.id,
+      name: product.name,
+      category: product.categoryId,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
   useEffect(() => {
     if (segmentClient?.config?.writeKey) {
+      events.on('products_searched', handleProductsSearched)
+      events.on('product_list_viewed', handleProductListViewed)
+      events.on('promotion_viewed', handlePromotionViewed)
+      events.on('promotion_clicked', handlePromotionClicked)
       events.on('product_clicked', handleClickProduct)
-      events.on('userLogin', handleLogin)
+      events.on('product_viewed', handleProductViewed)
       events.on('product_added', handleProductAdded)
-      events.on('order_placed', handleOrderPlaced)
+      events.on('cart_product_removed', handleProductRemoved)
+      events.on('cart_viewed', handleCartViewed)
+      events.on('checkout_started', handleCheckoutStarted)
       events.on('order_updated', handleUpdateOrder)
+      events.on('coupon_entered', handleCouponEntered)
+      events.on('offer_applied', handleCouponApplied)
+      events.on('offer_denied', handleCouponDenied)
+      events.on('offer_removed', handleCouponRemoved)
+      events.on('product_reviewed', handleProductReviewed)
+      events.on('userLogin', handleLogin)
+      events.on('order_placed', handleOrderPlaced)
       events.on('order_added', handleAddOrder)
-      events.on('cart_product_removed', handleProductRemoved)
+      events.on('product_added_to_wishlist', handleProductAddedToWishlist)
+      events.on('product_removed_from_wishlist', handleProductRemovedFromWishlist)
+      events.on('wishlist_product_added_to_cart', handleWishlistProductAddedToCart)
     }
     return () => {
       if (segmentClient?.config?.writeKey) {
+        events.off('products_searched', handleProductsSearched)
+        events.off('product_list_viewed', handleProductListViewed)
+        events.off('promotion_viewed', handlePromotionViewed)
+        events.off('promotion_clicked', handlePromotionClicked)
         events.off('product_clicked', handleClickProduct)
-        events.off('userLogin', handleLogin)
+        events.off('product_viewed', handleProductViewed)
         events.off('product_added', handleProductAdded)
-        events.off('order_placed', handleOrderPlaced)
+        events.off('cart_product_removed', handleProductRemoved)
+        events.off('cart_viewed', handleCartViewed)
+        events.off('checkout_started', handleCheckoutStarted)
         events.off('order_updated', handleUpdateOrder)
+        events.off('coupon_entered', handleCouponEntered)
+        events.off('offer_applied', handleCouponApplied)
+        events.off('offer_denied', handleCouponDenied)
+        events.off('offer_removed', handleCouponRemoved)
+        events.off('product_reviewed', handleProductReviewed)
+        events.off('userLogin', handleLogin)
+        events.off('order_placed', handleOrderPlaced)
         events.off('order_added', handleAddOrder)
-        events.off('cart_product_removed', handleProductRemoved)
+        events.off('product_added_to_wishlist', handleProductAddedToWishlist)
+        events.off('product_removed_from_wishlist', handleProductRemovedFromWishlist)
+        events.off('wishlist_product_added_to_cart', handleWishlistProductAddedToCart)
       }
     }
   }, [segmentClient])
@@ -110,7 +294,7 @@ export const AnalyticsSegment = (props: any) => {
   useEffect(() => {
     if (configState?.configs?.segment_track_id?.value) {
       const _segmentClient: any = createClient({
-        writeKey: configState?.configs?.segment_track_id?.value
+        writeKey: configState?.configs?.segment_track_id?.value,
       });
       setSegmentClient(_segmentClient)
     }
@@ -122,6 +306,5 @@ export const AnalyticsSegment = (props: any) => {
         {children}
       </AnalyticsProvider>
     </>
-
   )
 }

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

@@ -21,7 +21,7 @@ export const AppleLogin = (props: any) => {
   const [{ configs }] = useConfig();
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
@@ -53,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -66,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -79,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>

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?.business_view?.components?.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: {
@@ -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,13 @@ export const BusinessBasicInformation = (
 								iconTitle='snapchat'
 							/>
 						)}
-						{isChewLayout && (
+						{isChewLayout && !hideInfoIcon && (
 							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
-								<OText style={{ textDecorationColor: theme.colors.black, textDecorationLine: 'underline' }}>
+								<OText
+									color={theme.colors.primary}
+									style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+									size={12}
+								>
 									{t('SEE_MORE_DESCRIPTION', 'See more')}
 								</OText>
 							</TouchableOpacity>
@@ -263,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: {
-						uri: header || optimizeImage(businessState?.business?.header || theme?.images?.dummies?.businessHeader, 'h_250,c_limit')
+		<BusinessContainer isChewLayout={isChewLayout && hideLogo}>
+			{!hideHeader && (
+				<BusinessHeader
+					isChewLayout={isChewLayout}
+					style={
+						isBusinessInfoShow
+							? styles.businesInfoheaderStyle
+							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
 					}
-				})}
-				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}
+					{...(!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>
 				)}
@@ -337,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}
@@ -380,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>
@@ -416,18 +460,43 @@ export const BusinessBasicInformation = (
 									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
 										<>
 											<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-												<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+												<OText
+													color={theme.colors.primary}
+													style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+													size={12}
+												>
 													{t('PREORDER', 'Preorder')}
 												</OText>
 											</TouchableOpacity>
 											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 										</>
 									)}
-									<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
-										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-											{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>