ordering-ui-react-native 0.21.21 → 0.21.22-release

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

package/themes/kiosk/src/components/shared/OButton.tsx

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

package/themes/original/index.tsx

@@ -96,10 +96,11 @@ import { LogoutButton } from './src/components/LogoutButton';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { WalletTransactionItem } from './src/components/WalletTransactionItem';
 import { Promotions } from './src/components/Promotions'
-import { PageBanner } from './src/components/PageBanner'
 import { MultiCart } from './src/components/MultiCart'
+import { PageBanner } from './src/components/PageBanner'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
-
+import { DatePickerUI } from './src/components/DatePicker'
+import { WebsocketStatus } from './src/components/WebsocketStatus';
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
 import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
@@ -263,7 +264,8 @@ export {
 	Promotions,
 	PageBanner,
 	MyOrders,
-  MultiCart,
+	MultiCart,
+	WebsocketStatus,
 	ORDER_TYPES,
 	USER_TYPE,
 
@@ -340,5 +342,8 @@ export {
 	_retrieveStoreData,
 	_setStoreData,
 	_removeStoreData,
-	_clearStoreData
+	_clearStoreData,
+
+	// Date Picker
+	DatePickerUI
 }

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

@@ -1,30 +1,40 @@
 import React from 'react';
 import FastImage from 'react-native-fast-image'
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import {
 	AddressDetails as AddressDetailsController,
 	useOrder,
 	useLanguage,
 } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
 
 import { ADContainer, ADHeader, ADAddress, ADMap } from './styles';
-
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon } from '../shared';
-import { useWindowDimensions } from 'react-native';
+import { OText } from '../shared';
+import { getTypesText } from '../../utils';
 
 const AddressDetailsUI = (props: any) => {
-	const { navigation, addressToShow, isCartPending, googleMapsUrl, apiKey } =
-		props;
+	const {
+		navigation,
+		addressToShow,
+		isCartPending,
+		googleMapsUrl,
+		apiKey
+	} = props;
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
+	const [{ options }] = useOrder();
 	const [, t] = useLanguage();
 	const { width } = useWindowDimensions();
 
+	const orderTypeText = {
+		key: getTypesText(options?.type || 1),
+		value: t(getTypesText(options?.type || 1), 'Delivery')
+	}
+
 	const styles = StyleSheet.create({
 		productStyle: {
-			width: width,
+			width,
 			height: 151,
 			marginVertical: 10
 		}
@@ -39,13 +49,13 @@ const AddressDetailsUI = (props: any) => {
 						lineHeight={24}
 						color={theme.colors.textNormal}
 					>
-						{t('DELIVERY_ADDRESS', 'Delivery address')}
+						{t(`${orderTypeText.key}_ADDRESS`, `${orderTypeText.value} address`)}
 					</OText>
 				)}
 			</ADHeader>
 			{!!apiKey && googleMapsUrl && (
 				<ADMap
-					style={{ marginStart: -40, marginEnd: -40, width: width, flex: 1 }}>
+					style={{ width, flex: 1, marginStart: -20, marginEnd: -20, }}>
 					<FastImage
 						style={styles.productStyle}
 						source={{

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

@@ -122,8 +122,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
-			: { paddingVertical: 10, paddingLeft: 40, paddingRight: 20 }
+			? { paddingVertical: 0, paddingLeft: 20, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 20, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();
@@ -371,6 +371,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		setToggleMap(!toggleMap);
 	};
 
+	const showFieldWithTheme = (name) => {
+		return !theme?.address?.components?.[name]?.hidden
+	}
+
 	useEffect(() => {
 		if (
 			orderState.loading &&
@@ -672,7 +676,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								{showField && showField('internal_number') && (
+								{((isRequiredField && isRequiredField('internal_number')) || showFieldWithTheme('internal_number')) && (
 									<Controller
 										control={control}
 										name="internal_number"
@@ -708,7 +712,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												isFocusHighlight
 												style={{
 													...styles.inputsStyle,
-													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
+													marginRight: showField?.('internal_number') && showField?.('zipcode') ? 24 : 0
 												}}
 												forwardRef={internalNumberRef}
 												returnKeyType="next"
@@ -719,7 +723,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									/>
 								)}
 
-								{showField && showField('zipcode') && (
+								{((isRequiredField && isRequiredField('zipcode')) || showFieldWithTheme('zipcode')) && (
 									<Controller
 										control={control}
 										name="zipcode"
@@ -764,7 +768,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 								)}
 							</View>
 
-							{showField && showField('address_notes') && (
+							{((isRequiredField && isRequiredField('address_notes')) || showFieldWithTheme('address_notes')) && (
 								<Controller
 									control={control}
 									name="address_notes"

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

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const AddressFormContainer = styled.View`
     flex: 1;
-    padding: 0px 40px 20px;
+    padding: 0px 20px 20px;
     background-color: ${(props: any) => props.theme.colors.backgroundPage};
     justify-content: space-between;
 `

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
-import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
+import { AddressList as AddressListController, useLanguage, useOrder } from 'ordering-components/native'
 import { AddressItem, Container } from './styles'
 import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
-import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
+import { OButton, OText, OAlert, OIcon } from '../shared'
 import { AddressListParams } from '../../types'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
@@ -18,12 +18,10 @@ const AddressListUI = (props: AddressListParams) => {
 		route,
 		addressList,
 		isFromProfile,
-		nopadding,
 		handleSetDefault,
 		handleDelete,
 		setAddressList,
 		isGoBack,
-		actionStatus,
 		isFromBusinesses,
 		isFromProductsList,
 		afterSignup,
@@ -34,7 +32,6 @@ const AddressListUI = (props: AddressListParams) => {
 
 	const [orderState] = useOrder()
 	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
 	const [refreshing] = useState(false);
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
@@ -296,8 +293,8 @@ const AddressListUI = (props: AddressListParams) => {
 							<OButton
 								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
 								imgRightSrc=''
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary }}
+								bgColor={theme.colors.primary}
+								textStyle={{ color: theme.colors.white }}
 								style={styles.button}
 								borderColor={theme.colors.primary}
 								onClick={() => !afterSignup ? onNavigationRedirect(

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

@@ -3,10 +3,10 @@ import styled from 'styled-components/native'
 export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
-	 paddingLeft: 40px;
-	 paddingRight: 40px;
-     margin-bottom: 40px;
-     padding-top: 10px;
+	paddingLeft: 20px;
+	paddingRight: 20px;
+    margin-bottom: 40px;
+    padding-top: 10px;
 `
 
 export const AddressItem = styled.TouchableOpacity`

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

@@ -23,8 +23,7 @@ export const AnalyticsSegment = (props: any) => {
     segmentClient.track('Product List Viewed', {
       business_id: category?.business_id,
       category_id: category?.id,
-      category: category?.name,
-      products: category?.products
+      category: category?.name
     })
   }
 
@@ -62,11 +61,12 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
-  const handleProductAdded = (product: any) => {
+  const handleProductAdded = (product: any, result: any) => {
     segmentClient.track('Product Added', {
-      id: product.id,
+      cart_id: result.uuid,
+      product_id: product.id,
       name: product.name,
-      category: product.category_id,
+      category: product.category_id || product?.categoryId,
       price: product.price,
       quantity: product.quantity
     })
@@ -101,7 +101,7 @@ export const AnalyticsSegment = (props: any) => {
 
   const handleOrderPlaced = (order: any) => {
     segmentClient.track('Order Placed', {
-      id: order.id,
+      order_id: order.id,
       affiliation: order.business?.name,
       revenue: order.total,
       tax: order.tax_total,

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

@@ -72,7 +72,7 @@ export const BusinessBasicInformation = (
 			alignItems: 'flex-start'
 		},
 		businessInfo: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			paddingTop: isChewLayout ? 0 : 56,
 		},
 		bullet: {
@@ -95,7 +95,7 @@ export const BusinessBasicInformation = (
 			width: '100%',
 			top: 0,
 			zIndex: 100,
-			left: 40
+			left: 20
 		},
 		socialIcon: {
 			borderRadius: 3,
@@ -217,7 +217,7 @@ export const BusinessBasicInformation = (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
 							{[...Array(5).keys()].map(i => (
-								<View style={styles.socialIcon} key={i}>
+								<View style={{ ...styles.socialIcon, borderWidth: 0 }} key={i}>
 									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
 								</View>
 							))}
@@ -247,7 +247,7 @@ export const BusinessBasicInformation = (
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
-										style={{ width: 10, height: 12 }}
+										style={{ width: 10, height: 12, bottom: 1 }}
 										cover
 									/>
 								</View>

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

@@ -11,7 +11,7 @@ export const BusinessHeader = styled.ImageBackground`
 `;
 export const BusinessLogo = styled.View`
   position: absolute;
-  start: 40px;
+  start: 20px;
   top: -36px;
   z-index: 50;
   box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};

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

@@ -35,7 +35,12 @@ import FastImage from 'react-native-fast-image'
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation';
 
-export const BusinessControllerUI = (props: BusinessControllerParams) => {
+function BusinessControllerPropsAreEqual(prevProps: any, nextProps: any) {
+	return JSON.stringify(prevProps.business) === JSON.stringify(nextProps.business) &&
+		prevProps.isBusinessOpen === nextProps.isBusinessOpen
+}
+
+export const BusinessControllerUI = React.memo((props: BusinessControllerParams) => {
 	const {
 		business,
 		handleClick,
@@ -76,7 +81,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden
 
 	const textSize = 12
-	const cardHeight = windowHeight * 0.3
+	const cardHeight = windowHeight * 0.34
 
 	const styles = StyleSheet.create({
 		container: {
@@ -184,7 +189,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
+		<View style={{ minHeight: 200 }}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					style={[style, styles.container]}
@@ -227,7 +232,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							</View>
 						)}
 						{!hideBusinessOffer && (
-							getBusinessOffer((business?.offers)) &&
+							!!getBusinessOffer((business?.offers)) &&
 							<OfferBox
 								isClosed={!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1')}
 								isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}
@@ -239,7 +244,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 									numberOfLines={2}
 									ellipsizeMode='tail'
 									lineHeight={13}
-								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
+								>{t('DISCOUNT', 'Discount')}{' '}{getBusinessOffer((business?.offers))}</OText>
 							</OfferBox>
 						)}
 						<BusinessState isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}>
@@ -256,7 +261,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo style={{ position: 'absolute', bottom: 85, left: 15 }}>
+						<BusinessInfo style={{ position: 'absolute', top: -26, left: 15 }}>
 							{!hideBusinessLogo && (
 								<BusinessLogo style={styles.businessLogo}>
 									<FastImage
@@ -270,11 +275,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</BusinessLogo>
 							)}
 						</BusinessInfo>
-						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, alignItems: 'flex-start' }}>
 							<OText
 								size={textSize + 2}
-								style={{ lineHeight: 18, marginBottom: 6 }}
-								weight={'500'}>
+								style={{ lineHeight: 18, marginBottom: 6, width: '90%' }}
+								weight={'500'}
+								numberOfLines={1}
+								ellipsizeMode='tail'
+							>
 								{business?.name}
 							</OText>
 							{(!hideBusinessFavorite || !hideBusinessReviews) && (
@@ -301,7 +309,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</ReviewAndFavorite>
 							)}
 						</View>
-						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={1}>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3, fontFamily: '' }} numberOfLines={1}>
 							{business?.address}
 						</OText>
 						<Metadata>
@@ -373,9 +381,9 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</View>
 				</Placeholder>
 			)}
-		</InView>
+		</View>
 	);
-};
+}, BusinessControllerPropsAreEqual);
 
 export const BusinessController = (props: BusinessControllerParams) => {
 	const BusinessControllerProps = {

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

@@ -8,13 +8,14 @@ export const BusinessHero = styled.View`
 `
 
 export const BusinessContent = styled.View`
-    padding-horizontal: 18px;
-    padding-bottom: 10px;
-    border-bottom-left-radius: 7.6px;
-    border-bottom-right-radius: 7.6px;
-    border-width: 1px;
-    border-color: ${(props: any) => props.theme.colors.border};
-	 overflow: visible;
+  position: relative;
+  padding-horizontal: 18px;
+  padding-bottom: 10px;
+  border-bottom-left-radius: 7.6px;
+  border-bottom-right-radius: 7.6px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+	overflow: visible;
 `;
 
 export const BusinessInfo = styled.View`

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

@@ -17,7 +17,7 @@ export const MediaWrapper = styled.ScrollView`
   height: 127px;
 `
 export const InnerContent = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 export const WrapScheduleBlock = styled.View`
   margin: 20px 0;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;