ordering-ui-react-native 0.18.0 → 0.18.1-release

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,
@@ -75,7 +75,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	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 textSize = 12
 	const cardHeight = windowHeight * 0.3
 
 	const styles = StyleSheet.create({
@@ -151,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') {
@@ -185,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}
@@ -203,9 +213,9 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					<BusinessHero>
 						{!hideBusinessHeader && (
 							<FastImage
-								style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
-								source={(businessHeader || business?.header) ? {
-									uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
+								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}
@@ -216,19 +226,23 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
-						{(!isCustomLayout) && !hideBusinessOffer && (
+						{!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
@@ -242,51 +256,28 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
+						<BusinessInfo style={{ position: 'absolute', bottom: 85, left: 15 }}>
 							{!hideBusinessLogo && (
 								<BusinessLogo style={styles.businessLogo}>
 									<FastImage
 										style={{ width: 56, height: 56 }}
-										source={(businessLogo || business?.logo) ? {
-											uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+										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}
 									/>
 								</BusinessLogo>
 							)}
-							{!isCustomLayout && (!hideBusinessFavorite || !hideBusinessReviews) && (
-								<ReviewAndFavorite>
-									{(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 }}>
-												{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-											</OText>
-										</Reviews>
-									)}
-									{!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>
-						<View style={isCustomLayout && { 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 }}
+								style={{ lineHeight: 18, marginBottom: 6, width: '90%' }}
 								weight={'500'}>
 								{business?.name}
 							</OText>
-							{isCustomLayout && (!hideBusinessFavorite || !hideBusinessReviews) && (
+							{(!hideBusinessFavorite || !hideBusinessReviews) && (
 								<ReviewAndFavorite>
 									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
 										<Reviews>
@@ -300,8 +291,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 										<LottieAnimation
 											type='favorite'
 											onClick={handleChangeFavorite}
-											initialValue={business?.favorite ? 0.75 : 0}
-											toValue={business?.favorite ? 0 : 0.75}
+											initialValue={business?.favorite ? 0.5 : 0}
+											toValue={business?.favorite ? 0 : 0.5}
 											disableAnimation={!auth}
 											iconProps={{ color: theme.colors.danger5, size: 18 }}
 											isActive={business?.favorite}
@@ -310,7 +301,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</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>

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

@@ -34,8 +34,8 @@ export const Metadata = styled.View`
 
 export const BusinessState = styled.View`
   position: absolute;
-	top: 13px;
-	end: 18px;
+  top: ${(props: any) => props.isRibbon ? '32px' : '15px'};
+	right: 15px;
 `
 
 export const BusinessLogo = styled.View`
@@ -72,15 +72,22 @@ 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 OfferBox = styled.View`
   position: absolute;
   z-index: 1;
-  top: 20px;
-  right: 10px;
   border-radius: 50px;
-  color: ${(props: any) => props.theme.colors.textThird};
+  top: ${(props: any) => props.isRibbon ? '32px' : '15px'};
+  right: ${(props: any) => props.isClosed ? '110px' : '15px'};
   background: ${(props: any) => props.theme.colors.inputBorderColor};
   padding: 3px 8px;
   max-width: 180px;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
@@ -6,33 +7,29 @@ import {
 	useLanguage,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import FastImage from 'react-native-fast-image'
+
+import { OText } from '../shared';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
 	BusinessContent,
-	BusinessCategory,
 	BusinessInfo,
 	Metadata,
-	BusinessState,
 	BusinessLogo,
-	Reviews,
 	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 	const { business, handleClick, isBusinessOpen } = props;
-	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
-		useUtils();
+
+	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
-
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 25,
@@ -79,35 +76,28 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			justifyContent: 'flex-start',
 			width: '100%',
 		},
+		productStyle: {
+			height: 40,
+			width: 40
+		}
 	});
 
-	const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
 	const { width } = useWindowDimensions();
 
-	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
-		const _types: any = [];
-		types.forEach((type) => {
-			if (business[type]) {
-				_types.push(t(type.toUpperCase(), type));
-			}
-		});
-		return _types.join(', ');
-	};
-
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
 			{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}
@@ -118,10 +108,13 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			)}
 			<BusinessHero>
 				<BusinessLogo>
-					<OIcon
-						url={optimizeImage(business?.logo, 'h_100,c_limit')}
-						width={40}
-						height={40}
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(business?.logo, 'h_100,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
 					/>
 				</BusinessLogo>
 				<BusinessContent style={{ width: width * 0.6 }}>
@@ -129,23 +122,7 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						<OText size={12} ellipsizeMode={'tail'} numberOfLines={2}>
 							{business?.name}
 						</OText>
-						{/* {business?.reviews?.total > 0 && (
-              <Reviews>
-                <IconAntDesign
-                  name="star"
-                  color={theme.colors.primary}
-                  size={16}
-                  style={styles.starIcon}
-                />
-                <OText>
-                  {parseNumber(business?.reviews?.total, { separator: '.' })}
-                </OText>
-              </Reviews>
-            )} */}
 					</BusinessInfo>
-					{/* <BusinessCategory>
-            <OText>{getBusinessType()}</OText>
-          </BusinessCategory> */}
 					<Metadata>
 						{!isBusinessOpen ? (
 							<View style={styles.closed}>
@@ -155,7 +132,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 							</View>
 						) : (
 							<View style={styles.bullet}>
-								{/* <MaterialComIcon name="alarm" size={16} /> */}
 								<OText size={10} color={theme.colors.textSecondary}>
 									{t('DELIVERY_FEE', 'Delivery Fee')}
 								</OText>
@@ -184,15 +160,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						)}
 					</Metadata>
 				</BusinessContent>
-				{/* <BusinessState>
-          {!business?.open && (
-            <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
-            </View>
-          )}
-        </BusinessState> */}
 			</BusinessHero>
 		</Card>
 	);

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

@@ -70,4 +70,12 @@ 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'};
+  `}
 `

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
-	useLanguage, useUtils
+	useLanguage, useUtils, useConfig,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
@@ -16,31 +16,41 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
 import { formatUrlVideo } from '../../utils'
 import { ScheduleAccordion } from '../ScheduleAccordion';
+import moment from 'moment';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
+	const [{ configs }] = useConfig()
+	const [orientationState] = useDeviceOrientation();
+
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
+
+	const hideLocation = theme?.business_view?.components?.information?.components?.location?.hidden
+	const hideSchedule = theme?.business_view?.components?.information?.components?.schedule?.hidden
+	const hideVideos = theme?.business_view?.components?.information?.components?.videos?.hidden
+	const hideImages = theme?.business_view?.components?.information?.components?.images?.hidden
+	const hideAddress = theme?.business_view?.components?.information?.components?.address?.hidden
+	const formatTime = configs?.general_hour_format?.value
+
+	const checkTime = (val: number) => (val < 10 ? `0${val}` : val);
+	const timeFormated = (time: any) => {
+		return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
+	}
 
-	const scheduleFormatted = ({
-		hour,
-		minute,
-	}: {
-		hour: number | string;
-		minute: number | string;
-	}) => {
-		const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
-		const zz = hour > 12 ? 'PM' : 'AM';
-		const h = parseInt(`${hour}`);
-		return `${h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}`;
-	};
 	const businessCoordinate = {
 		lat: businessState?.business?.location?.lat,
 		lng: businessState?.business?.location?.lng,
@@ -71,6 +81,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return iAry;
 	};
 
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
 	return (
 		<BusinessInformationContainer>
 			<WrapMainContent contentContainerStyle={{}}>
@@ -78,87 +92,128 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 					<OText size={24} weight={'600'}>
 						{businessState?.business?.name}
 					</OText>
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('BUSINESS_LOCATION', 'Business Location')}
+					{!hideLocation && (
+						<>
+							<GrayBackground>
+								<OText size={16} weight="500">
+									{t('BUSINESS_LOCATION', 'Business Location')}
+								</OText>
+							</GrayBackground>
+							{businessLocation.location && (
+								<WrapBusinessMap style={styles.wrapMapStyle}>
+									<GoogleMap
+										readOnly
+										location={businessLocation.location}
+										markerTitle={businessState?.business?.name}
+										businessZones={businessState?.business?.zones}
+									/>
+								</WrapBusinessMap>
+							)}
+						</>
+					)}
+					{!hideAddress && (
+						<OText size={12} mBottom={10}>
+							{businessState?.business?.address}
 						</OText>
-					</GrayBackground>
-					{businessLocation.location && (
-						<WrapBusinessMap style={styles.wrapMapStyle}>
-							<GoogleMap
-								readOnly
-								location={businessLocation.location}
-								markerTitle={businessState?.business?.name}
-							/>
-						</WrapBusinessMap>
 					)}
-					<OText size={12} mBottom={20}>
-						{businessState?.business?.address}
-					</OText>
+					{businessState?.business?.address_notes && (
+						<>
+							<OText
+								size={12}
+								mBottom={10}
+								numberOfLines={isReadMore ? 20 : 3}
+								onTextLayout={onTextLayout}
+							>
+								{businessState?.business?.address_notes}
+							</OText>
+							{lengthMore && (
+								<TouchableOpacity
+									onPress={() => setIsReadMore(!isReadMore)}
+								>
+									<OText size={12} mBottom={20} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+								</TouchableOpacity>
+							)}
+						</>
+					)}
 					<DivideView />
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('OPENING_TIME', 'Opening Time')}
-						</OText>
-					</GrayBackground>
-					{businessSchedule && businessSchedule?.length > 0 && (
-						<WrapScheduleBlock>
-							{businessSchedule.map((schedule: any, i: number) => (
-								<ScheduleBlock key={i}>
-									<ScheduleAccordion
-										weekIndex={i}
-										scheduleFormatted={scheduleFormatted}
-										schedule={schedule}
-									/>
-								</ScheduleBlock>
-							))}
-						</WrapScheduleBlock>
+					{!hideSchedule && (
+						<>
+							<GrayBackground>
+								<OText size={16} weight="500">
+									{t('OPENING_TIME', 'Opening Time')}
+								</OText>
+							</GrayBackground>
+							{businessSchedule && businessSchedule?.length > 0 && (
+								<WrapScheduleBlock>
+									{businessSchedule.map((schedule: any, i: number) => (
+										<ScheduleBlock key={i}>
+											<ScheduleAccordion
+												weekIndex={i}
+												timeFormated={timeFormated}
+												schedule={schedule}
+											/>
+										</ScheduleBlock>
+									))}
+								</WrapScheduleBlock>
+							)}
+						</>
 					)}
+
 					{/* {businessState?.business?.gallery?.length > 0 && ( */}
+
 					<>
-						{bVideos().length > 0 && (
+						{!hideVideos && (
 							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('VIDEOS', 'Videos')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bVideos().map((v: any) => (
-										<WebView
-											key={`vid_id_${v.id}`}
-											style={{ width: 210, height: 127, borderRadius: 7.6 }}
-											javaScriptEnabled={true}
-											domStorageEnabled={true}
-											source={{
-												html: `
-													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
+								{bVideos().length > 0 && (
+									<>
+										<DivideView />
+										<GrayBackground>
+											<OText size={16} weight="500">
+												{t('VIDEOS', 'Videos')}
+											</OText>
+										</GrayBackground>
+										<MediaWrapper horizontal>
+											{bVideos().map((v: any) => (
+												<WebView
+													key={`vid_id_${v.id}`}
+													style={{ width: 210, height: 127, borderRadius: 7.6 }}
+													javaScriptEnabled={true}
+													domStorageEnabled={true}
+													source={{
+														html: `
+												<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
 												`,
-											}}
-											mediaPlaybackRequiresUserAction={true}
-										/>
-									))}
-								</MediaWrapper>
+													}}
+													mediaPlaybackRequiresUserAction={true}
+												/>
+											))}
+										</MediaWrapper>
+									</>
+								)}
 							</>
 						)}
-						{bImages().length > 0 && (
+
+						{!hideImages && (
 							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('IMAGES', 'Images')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bImages().map((i: any) => (
-										i.file != null &&
-										<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
-											<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
-											{/* <OText size={12} color={colors.red} style={{position: 'absolute'}}>{i.file}</OText> */}
-										</View>
-									))}
-								</MediaWrapper>
+								{bImages().length > 0 && (
+									<>
+										<DivideView />
+										<GrayBackground>
+											<OText size={16} weight="500">
+												{t('IMAGES', 'Images')}
+											</OText>
+										</GrayBackground>
+										<MediaWrapper horizontal>
+											{bImages().map((i: any) => (
+												i.file != null &&
+												<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
+													<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
+													{/* <OText size={12} color={colors.red} style={{position: 'absolute'}}>{i.file}</OText> */}
+												</View>
+											))}
+										</MediaWrapper>
+									</>
+								)}
 							</>
 						)}
 					</>

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;
-`;
+`;