ordering-ui-react-native 0.16.51 → 0.16.52-release

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking, Pressable } 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';
@@ -45,24 +46,26 @@ 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 styles = StyleSheet.create({
 		businesInfoheaderStyle: {
 			height: 150,
 		},
 		headerStyle: {
-			height: 260,
+			height: isChewLayout ? 170 : 260,
 		},
-		businessLogo: {
+		logoStyle: {
 			width: 72,
 			height: 72,
 			borderRadius: 7.6,
 			justifyContent: 'flex-start',
-			alignItems: 'flex-start',
+			alignItems: 'flex-start'
 		},
 		businessInfo: {
 			paddingHorizontal: 40,
-			paddingTop: 56,
+			paddingTop: isChewLayout ? 0 : 56,
 		},
 		bullet: {
 			flexDirection: 'row',
@@ -89,7 +92,7 @@ export const BusinessBasicInformation = (
 		socialIcon: {
 			borderRadius: 3,
 			borderColor: theme.colors.border,
-			borderWidth: 1,
+			borderWidth: isChewLayout ? 0 : 1,
 			width: 20,
 			height: 20,
 			justifyContent: 'center',
@@ -101,7 +104,20 @@ export const BusinessBasicInformation = (
 			height: 12,
 			width: 12,
 			margin: 0,
-			padding: 0
+			padding: 0,
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center'
+		},
+		headerChewStyle: {
+			paddingHorizontal: 30,
+			justifyContent: 'center',
+			height: '100%'
+		},
+		socialIconsChewContainer: {
+			flexDirection: 'row',
+			justifyContent: 'flex-start',
+			marginTop: 5
 		}
 	});
 
@@ -135,14 +151,14 @@ export const BusinessBasicInformation = (
 	};
 
 	const SocialNetWork = (props: any) => {
-		const { socialLink, iconTitle} = props
+		const { socialLink, iconTitle } = props
 
 		return (
 			<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(socialLink)}>
 				<MaterialComIcon
 					name={iconTitle}
-					color={theme.colors.textNormal}
-					size={14}
+					color={isChewLayout ? theme.colors.black : theme.colors.textNormal}
+					size={isChewLayout ? 18 : 14}
 				/>
 			</TouchableOpacity>
 		)
@@ -172,85 +188,9 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
-	return (
-		<BusinessContainer>
-			<BusinessHeader
-				style={
-					isBusinessInfoShow
-						? styles.businesInfoheaderStyle
-						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
-				}
-				source={{
-					uri:
-						header ||
-						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
-				}}>
-				{!isBusinessInfoShow && (
-					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
-						<OIcon src={theme.images.general.info} width={24} />
-					</WrapBusinessInfo>
-				)}
-			</BusinessHeader>
-			<BusinessInfo style={styles.businessInfo}>
-				<BusinessLogo>
-					{loading ? (
-						<View>
-							<Placeholder Animation={Fade}>
-								<PlaceholderLine height={50} width={20} />
-							</Placeholder>
-						</View>
-					) : (
-						!isBusinessInfoShow && (
-							<OIcon
-								url={
-									logo ||
-									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
-								}
-								style={styles.businessLogo}
-							/>
-						)
-					)}
-				</BusinessLogo>
-				<BusinessInfoItem>
-					{loading ? (
-						<Placeholder Animation={Fade}>
-							<PlaceholderLine height={30} width={20} />
-						</Placeholder>
-					) : (
-						<TitleWrapper>
-							<OText size={24} weight={'600'}>
-								{business?.name}
-							</OText>
-							{business?.ribbon?.enabled && (
-								<RibbonBox
-									bgColor={business?.ribbon?.color}
-									isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
-									isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
-								>
-									<OText
-										size={10}
-										weight={'400'}
-										color={theme.colors.white}
-										numberOfLines={2}
-										ellipsizeMode='tail'
-										lineHeight={13}
-									>
-										{business?.ribbon?.text}
-									</OText>
-								</RibbonBox>
-							)}
-						</TitleWrapper>
-					)}
-				</BusinessInfoItem>
-				{loading ? (
-					<Placeholder Animation={Fade}>
-						<PlaceholderLine width={10} />
-					</Placeholder>
-				) : (
-					<View style={{ width: '75%' }}>
-						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
-					</View>
-				)}
+	const SocialIcons = () => {
+		return (
+			<>
 				{loading ? (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
@@ -266,7 +206,7 @@ export const BusinessBasicInformation = (
 						showsVerticalScrollIndicator={false}
 						showsHorizontalScrollIndicator={false}
 						horizontal
-						contentContainerStyle={{ flex: 1}}
+						contentContainerStyle={{ flex: 1 }}
 					>
 						{!!business?.facebook_profile && (
 							<SocialNetWork
@@ -281,14 +221,15 @@ export const BusinessBasicInformation = (
 							/>
 						)}
 						{!!business?.tiktok_profile && (
-							<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+							<Pressable style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
-										style={{ width: '100%', height: '100%'}}
+										style={{ width: 10, height: 12 }}
+										cover
 									/>
 								</View>
-							</TouchableOpacity>
+							</Pressable>
 						)}
 						{!!business?.pinterest_profile && (
 							<SocialNetWork
@@ -308,72 +249,202 @@ export const BusinessBasicInformation = (
 								iconTitle='snapchat'
 							/>
 						)}
+						{isChewLayout && (
+							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
+								<OText 
+									color={theme.colors.primary}
+									style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+									size={12}
+								>
+									{t('SEE_MORE_DESCRIPTION', 'See more')}
+								</OText>
+							</TouchableOpacity>
+						)}
 					</SocialListWrapper>
 				)}
-				<View>
-					<BusinessInfoItem>
-						{loading && (
-							<Placeholder Animation={Fade}>
-								<View style={{ flexDirection: 'row' }}>
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} />
-								</View>
-							</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 `}
+			</>
+		)
+	}
+
+	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}
 							</OText>
-							{orderState?.options?.type === 1 ? (
-								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-									{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
-								</OText>
+						)}
+						<View style={styles.socialIconsChewContainer}>
+							<SocialIcons />
+						</View>
+					</View>
+				)}
+			</BusinessHeader>
+			<BusinessInfo style={styles.businessInfo}>
+				{showLogo && (
+					<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}
+								/>
+						)}
+					</BusinessLogo>
+				)}
+				{!isChewLayout && (
+
+					<>
+						<BusinessInfoItem>
+							{loading ? (
+								<Placeholder Animation={Fade}>
+									<PlaceholderLine height={30} width={20} />
+								</Placeholder>
 							) : (
-								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-									{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
-								</OText>
+								<TitleWrapper>
+									<OText size={24} weight={'600'} numberOfLines={2}>
+										{business?.name}
+									</OText>
+									{business?.ribbon?.enabled && (
+										<RibbonBox
+											bgColor={business?.ribbon?.color}
+											isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+											isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+										>
+											<OText
+												size={10}
+												weight={'400'}
+												color={theme.colors.white}
+												numberOfLines={2}
+												ellipsizeMode='tail'
+												lineHeight={13}
+											>
+												{business?.ribbon?.text}
+											</OText>
+										</RibbonBox>
+									)}
+								</TitleWrapper>
 							)}
-							<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-								{parseDistance(business?.distance || 0) + `  \u2022 `}
-							</OText>
-						</View>
+						</BusinessInfoItem>
+						{loading ? (
+							<Placeholder Animation={Fade}>
+								<PlaceholderLine width={10} />
+							</Placeholder>
+						) : (
+							<View style={{ width: '75%' }}>
+								<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
+							</View>
+						)}
+						{!isChewLayout && (
+							<SocialIcons />
+						)}
+						<View>
+							<BusinessInfoItem>
+								{loading && (
+									<Placeholder Animation={Fade}>
+										<View style={{ flexDirection: 'row' }}>
+											<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+											<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+											<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+											<PlaceholderLine width={13} />
+										</View>
+									</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 ? (
+										<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>
+									)}
+									<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 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>
-					</BusinessInfoItem>
-				</View>
-				<WrapReviews>
-					{!isBusinessInfoShow && (
-						<>
-							{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
+						<WrapReviews>
+							{!isBusinessInfoShow && (
 								<>
-									<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-											{t('PRE_ORDER', 'Preorder')}
+									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
+										<>
+											<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+												<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.primary}
+											style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+											size={12}
+										>
+											{t('REVIEWS', 'Reviews')}
 										</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>
-						</>
-					)}
-				</WrapReviews>
+						</WrapReviews>
+					</>
+				)}
 			</BusinessInfo>
 			{businessInformationObtained ? (
 				<OModal

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

@@ -3,7 +3,7 @@ import { Platform } from 'react-native';
 
 export const BusinessContainer = styled.View`
   flex-direction: column;
-  padding-bottom: 35px;
+  padding-bottom: ${(props: any) => props.isChewLayout ? '0' : '35px'};
 `;
 export const BusinessHeader = styled.ImageBackground`
   width: 100%;
@@ -20,7 +20,7 @@ export const BusinessLogo = styled.View`
   box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};
   elevation: 2;
   background-color: white;
-  border-radius: 7.6px;
+  border-radius: 7.6px;  
 `;
 export const BusinessInfo = styled.View`
   justify-content: flex-start;