ordering-ui-react-native 0.16.37 → 0.16.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.37",
+  "version": "0.16.38",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/ReviewOrder/index.tsx

@@ -332,6 +332,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
 export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
+    defaultStar: 0,
     UIComponent: ReviewOrderUI
   }
   return <ReviewOrderController {...reviewOrderProps} />

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
 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 +22,8 @@ import {
 	WrapReviews,
 	WrapBusinessInfo,
 	TitleWrapper,
-	RibbonBox
+	RibbonBox,
+	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -44,6 +46,64 @@ export const BusinessBasicInformation = (
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
 
+	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
+		},
+		socialIcon: {
+			borderRadius: 3,
+			borderColor: theme.colors.border,
+			borderWidth: 1,
+			width: 20,
+			height: 20,
+			justifyContent: 'center',
+			alignItems: 'center',
+			marginLeft: 5
+		},
+		tiktokIcon: {
+			height: 12,
+			width: 12,
+			margin: 0,
+			padding: 0
+		}
+	});
+
 	const handleClickBusinessInformation = () => {
 		if (!businessInformationObtained) {
 			BusinessInformation = require('../BusinessInformation').BusinessInformation
@@ -73,6 +133,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={theme.colors.textNormal}
+					size={14}
+				/>
+			</TouchableOpacity>
+		)
+	}
 
 	useEffect(() => {
 		if (businessState?.loading) return
@@ -165,6 +238,53 @@ export const BusinessBasicInformation = (
 									</OText>
 								</RibbonBox>
 							)}
+							<SocialListWrapper
+								showsVerticalScrollIndicator={false}
+								showsHorizontalScrollIndicator={false}
+								horizontal
+								contentContainerStyle={{ flex: 1, justifyContent: 'flex-end'}}
+							>
+								{!!business?.facebook_profile && (
+									<SocialNetWork
+										socialLink={business?.facebook_profile}
+										iconTitle='facebook'
+									/>
+								)}
+								{!!business?.instagram_profile && (
+									<SocialNetWork
+										socialLink={business?.instagram_profile}
+										iconTitle='instagram'
+									/>
+								)}
+								{!!business?.tiktok_profile && (
+									<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+										<View style={styles.tiktokIcon}>
+											<OIcon
+												src={theme.images.general.tiktok}
+												style={{ width: '100%', height: '100%'}}
+											/>
+										</View>
+									</TouchableOpacity>
+								)}
+								{!!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'
+									/>
+								)}
+							</SocialListWrapper>
 						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
@@ -276,45 +396,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

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