ordering-ui-react-native 0.16.31 → 0.16.32-release

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

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } 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';
 import { BusinessBasicInformationParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -21,7 +23,8 @@ import {
 	WrapReviews,
 	WrapBusinessInfo,
 	TitleWrapper,
-	RibbonBox
+	RibbonBox,
+	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -43,6 +46,80 @@ 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 styles = StyleSheet.create({
+		businesInfoheaderStyle: {
+			height: 150,
+		},
+		headerStyle: {
+			height: isChewLayout ? 170 : 260,
+		},
+		logoStyle: {
+			width: 72,
+			height: 72,
+			borderRadius: 7.6,
+			justifyContent: 'flex-start',
+			alignItems: 'flex-start'
+		},
+		businessInfo: {
+			paddingHorizontal: 40,
+			paddingTop: isChewLayout ? 0 : 56,
+		},
+		bullet: {
+			flexDirection: 'row',
+			alignItems: 'center',
+		},
+		metadata: {
+			marginRight: 2,
+		},
+		starIcon: {
+			marginHorizontal: 5,
+		},
+		reviewStyle: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		modalTitleSectionStyle: {
+			position: 'absolute',
+			width: '100%',
+			top: 0,
+			zIndex: 100,
+			left: 40
+		},
+		socialIcon: {
+			borderRadius: 3,
+			borderColor: theme.colors.border,
+			borderWidth: isChewLayout ? 0 : 1,
+			width: 20,
+			height: 20,
+			justifyContent: 'center',
+			alignItems: 'center',
+			marginRight: 5,
+			marginBottom: 7
+		},
+		tiktokIcon: {
+			height: 12,
+			width: 12,
+			margin: 0,
+			padding: 0,
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center'
+		},
+		headerChewStyle: {
+			paddingHorizontal: 30,
+			justifyContent: 'center',
+			height: '100%'
+		},
+		socialIconsChewContainer: {
+			flexDirection: 'row',
+			justifyContent: 'flex-start',
+			marginTop: 5
+		}
+	});
 
 	const handleClickBusinessInformation = () => {
 		if (!businessInformationObtained) {
@@ -73,6 +150,19 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	const SocialNetWork = (props: any) => {
+		const { socialLink, iconTitle } = props
+
+		return (
+			<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(socialLink)}>
+				<MaterialComIcon
+					name={iconTitle}
+					color={isChewLayout ? theme.colors.black : theme.colors.textNormal}
+					size={isChewLayout ? 18 : 14}
+				/>
+			</TouchableOpacity>
+		)
+	}
 
 	useEffect(() => {
 		if (businessState?.loading) return
@@ -98,149 +188,251 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
+	const SocialIcons = () => {
+		return (
+			<>
+				{loading ? (
+					<Placeholder Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							{[...Array(5).keys()].map(i => (
+								<View style={styles.socialIcon} key={i}>
+									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
+								</View>
+							))}
+						</View>
+					</Placeholder>
+				) : (
+					<SocialListWrapper
+						showsVerticalScrollIndicator={false}
+						showsHorizontalScrollIndicator={false}
+						horizontal
+						contentContainerStyle={{ flex: 1 }}
+					>
+						{!!business?.facebook_profile && (
+							<SocialNetWork
+								socialLink={business?.facebook_profile}
+								iconTitle='facebook'
+							/>
+						)}
+						{!!business?.instagram_profile && (
+							<SocialNetWork
+								socialLink={business?.instagram_profile}
+								iconTitle='instagram'
+							/>
+						)}
+						{!!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: 10, height: 12 }}
+										cover
+									/>
+								</View>
+							</Pressable>
+						)}
+						{!!business?.pinterest_profile && (
+							<SocialNetWork
+								socialLink={business?.pinterest_profile}
+								iconTitle='pinterest'
+							/>
+						)}
+						{!!business?.whatsapp_number && (
+							<SocialNetWork
+								socialLink={business?.whatsapp_number}
+								iconTitle='whatsapp'
+							/>
+						)}
+						{!!business?.snapchat_profile && (
+							<SocialNetWork
+								socialLink={business?.snapchat_profile}
+								iconTitle='snapchat'
+							/>
+						)}
+						{isChewLayout && (
+							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
+								<OText style={{ textDecorationColor: theme.colors.black, textDecorationLine: 'underline' }}>
+									{t('SEE_MORE_DESCRIPTION', 'See more')}
+								</OText>
+							</TouchableOpacity>
+						)}
+					</SocialListWrapper>
+				)}
+			</>
+		)
+	}
+
 	return (
-		<BusinessContainer>
+		<BusinessContainer isChewLayout={isChewLayout && !showLogo}>
 			<BusinessHeader
+				isChewLayout={isChewLayout}
 				style={
 					isBusinessInfoShow
 						? styles.businesInfoheaderStyle
 						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
 				}
-				source={{
-					uri:
-						header ||
-						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
-				}}>
-				{!isBusinessInfoShow && (
+				{...(!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>
+						)}
+						<View style={styles.socialIconsChewContainer}>
+							<SocialIcons />
+						</View>
+					</View>
+				)}
 			</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}
+				{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>
+							) : (
+								<TitleWrapper>
+									<OText size={24} weight={'600'} numberOfLines={2}>
+										{business?.name}
 									</OText>
-								</RibbonBox>
+									{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>
 							)}
-						</TitleWrapper>
-					)}
-				</BusinessInfoItem>
-				{loading ? (
-					<Placeholder Animation={Fade}>
-						<PlaceholderLine width={10} />
-					</Placeholder>
-				) : (
-					<View style={{ width: '75%' }}>
-						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
-					</View>
-				)}
-				<View>
-					<BusinessInfoItem>
-						{loading && (
+						</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>
+								<PlaceholderLine width={10} />
 							</Placeholder>
+						) : (
+							<View style={{ width: '75%' }}>
+								<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
+							</View>
 						)}
-						<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>
+						{!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() })}>
+									{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' }}>
+													{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('PRE_ORDER', 'Preorder')}
+											{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
@@ -276,45 +468,3 @@ export const BusinessBasicInformation = (
 		</BusinessContainer>
 	);
 };
-
-const styles = StyleSheet.create({
-	businesInfoheaderStyle: {
-		height: 150,
-	},
-	headerStyle: {
-		height: 260,
-	},
-	businessLogo: {
-		width: 72,
-		height: 72,
-		borderRadius: 7.6,
-		justifyContent: 'flex-start',
-		alignItems: 'flex-start',
-	},
-	businessInfo: {
-		paddingHorizontal: 40,
-		paddingTop: 56,
-	},
-	bullet: {
-		flexDirection: 'row',
-		alignItems: 'center',
-	},
-	metadata: {
-		marginRight: 2,
-	},
-	starIcon: {
-		marginHorizontal: 5,
-	},
-	reviewStyle: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	modalTitleSectionStyle: {
-		position: 'absolute',
-		width: '100%',
-		top: 0,
-		zIndex: 100,
-		left: 40
-	},
-});

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;
@@ -68,3 +68,7 @@ export const RibbonBox = styled.View`
     border-radius: 50px;
   `}
 `
+
+export const SocialListWrapper = styled.ScrollView`
+  flex-direction: row;
+`