ordering-ui-react-native 0.15.57 → 0.15.58-release

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 } from '../../utils';
+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,65 @@ 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',
+			marginRight: 5,
+			marginBottom: 7
+		},
+		tiktokIcon: {
+			height: 12,
+			width: 12,
+			margin: 0,
+			padding: 0
+		}
+	});
+
 	const handleClickBusinessInformation = () => {
 		if (!businessInformationObtained) {
 			BusinessInformation = require('../BusinessInformation').BusinessInformation
@@ -73,6 +134,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
@@ -177,6 +251,65 @@ export const BusinessBasicInformation = (
 						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
 					</View>
 				)}
+				{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 && (
+							<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>
+				)}
 				<View>
 					<BusinessInfoItem>
 						{loading && (
@@ -276,45 +409,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;
+`

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

@@ -7,9 +7,9 @@ import {
 	useConfig
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,9 +20,12 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox,
+	ReviewAndFavorite
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
@@ -39,7 +42,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryPrice,
 		businessDeliveryTime,
 		businessPickupTime,
-		businessDistance
+		businessDistance,
+		handleFavoriteBusiness
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
@@ -119,8 +123,30 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
+  const handleChangeFavorite = () => {
+    handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+  }
+
 	return (
 		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+			{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>
+			)}
 			<BusinessHero>
 				<FastImage
 					style={{ height: 120 }}
@@ -160,14 +186,25 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							resizeMode={FastImage.resizeMode.cover}
 						/>
 					</BusinessLogo>
-					{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-						<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>
-					)}
+					<ReviewAndFavorite>
+						{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+							<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>
+						)}
+						<TouchableOpacity
+							onPress={handleChangeFavorite}
+						>
+							<IconAntDesign
+								name={business?.favorite ? 'heart' : 'hearto'}
+								color={theme.colors.danger5}
+								size={18}
+							/>
+						</TouchableOpacity>
+					</ReviewAndFavorite>
 				</BusinessInfo>
 				<OText
 					size={12}

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

@@ -49,7 +49,34 @@ export const BusinessLogo = styled.View`
    
 `
 
+export const ReviewAndFavorite = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
 export const Reviews = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 180px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,6 +20,7 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
@@ -97,6 +98,24 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
+			{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>
+			)}
 			<BusinessHero>
 				<BusinessLogo>
 					<OIcon

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

@@ -4,6 +4,7 @@ export const Card = styled.TouchableOpacity`
   margin-vertical: 4px;
   height: 60px;
   overflow: hidden;
+  position: relative;
 `;
 
 export const BusinessHero = styled.View`
@@ -48,3 +49,25 @@ export const BusinessLogo = styled.View`
 export const Reviews = styled.View`
   flex-direction: row;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 0px;
+  right: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 160px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -21,17 +21,20 @@ export const BusinessItemAccordion = (props: any) => {
 		singleBusiness,
 		handleClearProducts,
 		handleClickCheckout,
-		checkoutButtonDisabled
+		checkoutButtonDisabled,
+		isMultiCheckout
 	} = props
 
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice }] = useUtils();
+	const [{ configs }] = useConfig()
 	const theme = useTheme();
 
 	const isCartPending = cart?.status === 2
 	const isClosed = !cart?.valid_schedule
 	const isProducts = cart?.products?.length
+	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const [isActive, setActiveState] = useState(!!singleBusiness)
 
@@ -44,7 +47,7 @@ export const BusinessItemAccordion = (props: any) => {
 	}, [orderState?.carts])
 
 	return (
-		<BIContainer isClosed={isClosed} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
+		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
 				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
@@ -90,7 +93,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity
@@ -139,7 +142,7 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && (
+			{!isActive && !isClosed && !!isProducts && !isMultiCheckout && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
 					{cart?.valid_products && (

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

@@ -7,7 +7,9 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-  min-height: 120px;
+  ${(props: any) => !props.isMultiCheckout && css`
+    min-height: 120px;
+  `}
   ${(props: any) => props.isClosed && css`
 	  opacity: 0.5;
     min-height: 60px;