ordering-ui-react-native 0.15.62 → 0.15.63-release

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, StyleSheet } from 'react-native';
-import { useApi, useSession, useLanguage, useConfig, useToast, ToastType } from 'ordering-components/native';
+import { useApi, useSession, useLanguage, useConfig } from 'ordering-components/native';
 import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
 import uuid from 'react-native-uuid';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -19,14 +19,13 @@ export const AppleLogin = (props: any) => {
   const [{ auth }] = useSession();
   const [, t] = useLanguage();
   const [{ configs }] = useConfig();
-  const [, {showToast}] = useToast()
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
-    : t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
+    : t('CONTINUE_WITH_APPLE', 'Continue with Apple');
 
   const performAppleLogin = async (code: string) => {
     try {
@@ -45,7 +44,7 @@ export const AppleLogin = (props: any) => {
           handleLoading && handleLoading(false)
         }
       } else {
-        showToast(ToastType.Error, `Error login on apple from api Code: ${code} ${Platform.OS}`, 10000)
+        handleErrors && handleErrors(result)
         handleLoading && handleLoading(false)
       }
     } catch (err: any) {
@@ -54,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -67,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -80,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
@@ -88,7 +87,6 @@ export const AppleLogin = (props: any) => {
       );
 
       if (identityToken && authorizationCode) {
-        showToast(ToastType.Success, `Apple Authentication Completed, ${email}`)
         performAppleLogin(authorizationCode)
       } else {
         handleErrors && handleErrors('UNABLE_LOGIN_TOKEN', 'Unable to login, no token found')
@@ -158,9 +156,6 @@ export const AppleLogin = (props: any) => {
 
   return (
     <Container>
-      {credentialStateForUser !== -1 && (
-        <Text>{credentialStateForUser}</Text>
-      )}
       {canShowButton() &&
         <AppleButton
           onPress={() => Platform.OS == 'android' ? onAndroidButtonPress() : onIOSButtonPress(updateCredentialStateForUser)}

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 && (
@@ -223,7 +356,7 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							{isPreOrder && (
+							{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' }}>
@@ -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

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
 	useOrder,
 	useLanguage,
-	useConfig
+	useConfig,
+	useToast,
+	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
 import {
@@ -20,10 +24,12 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
-	RibbonBox
+	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) => {
@@ -40,13 +46,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryPrice,
 		businessDeliveryTime,
 		businessPickupTime,
-		businessDistance
+		businessDistance,
+		handleFavoriteBusiness,
+		enableIntersection
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
+	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -116,115 +126,177 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const handleBusinessClick = (selectedBusiness: any) => {
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
-			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+			if (configState?.configs?.preorder_status_enabled?.value === '1') {
+				navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+				return
+			}
+			showToast(ToastType.Info, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'));
 		}
 	}
 
+	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 }}
-					source={{
-						uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-				{(businessFeatured ?? business?.featured) && (
-					<View style={styles.featured}>
-						<FontAwesomeIcon name="crown" size={26} color="gold" />
-					</View>
-				)}
-				<BusinessState>
-					{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
-						<View style={styles.businessStateView}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+			{isIntersectionObserver ? (
+				<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
-								color={theme.colors.textThird}
 								size={10}
-								style={styles.businessStateText}>
-								{t('PREORDER', 'PREORDER')}
+								weight={'400'}
+								color={theme.colors.white}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+								lineHeight={13}
+							>
+								{business?.ribbon?.text}
 							</OText>
-						</View>
+						</RibbonBox>
 					)}
-				</BusinessState>
-			</BusinessHero>
-			<BusinessContent>
-				<BusinessInfo>
-					<BusinessLogo style={styles.businessLogo}>
+					<BusinessHero>
 						<FastImage
-							style={{ width: 56, height: 56 }}
+							style={{ height: 120 }}
 							source={{
-								uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
 							}}
 							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>
-					)}
-				</BusinessInfo>
-				<OText
-					size={12}
-					style={{ lineHeight: 18, marginBottom: 6 }}
-					weight={'500'}>
-					{business?.name}
-				</OText>
-				<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
-					{business?.address}
-				</OText>
-				{/* <BusinessCategory>
+						{(businessFeatured ?? business?.featured) && (
+							<View style={styles.featured}>
+								<FontAwesomeIcon name="crown" size={26} color="gold" />
+							</View>
+						)}
+						<BusinessState>
+							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
+								<View style={styles.businessStateView}>
+									<OText
+										color={theme.colors.textThird}
+										size={10}
+										style={styles.businessStateText}>
+										{t('PREORDER', 'PREORDER')}
+									</OText>
+								</View>
+							)}
+						</BusinessState>
+					</BusinessHero>
+					<BusinessContent>
+						<BusinessInfo>
+							<BusinessLogo style={styles.businessLogo}>
+								<FastImage
+									style={{ width: 56, height: 56 }}
+									source={{
+										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							</BusinessLogo>
+							<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}
+							style={{ lineHeight: 18, marginBottom: 6 }}
+							weight={'500'}>
+							{business?.name}
+						</OText>
+						<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+							{business?.address}
+						</OText>
+						{/* <BusinessCategory>
           <OText>{getBusinessType()}</OText>
         </BusinessCategory> */}
-				<Metadata>
-					{!isBusinessOpen ? (
-						<View style={styles.closed}>
-							<OText size={10} color={theme.colors.red}>
-								{t('CLOSED', 'Closed')}
-							</OText>
-						</View>
-					) : (
-						<View style={styles.bullet}>
-							{orderState?.options?.type === 1 && (
-								<OText size={10} color={theme.colors.textSecondary}>
-									{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
-								</OText>
+						<Metadata>
+							{!isBusinessOpen ? (
+								<View style={styles.closed}>
+									<OText size={10} color={theme.colors.red}>
+										{t('CLOSED', 'Closed')}
+									</OText>
+								</View>
+							) : (
+								<View style={styles.bullet}>
+									{orderState?.options?.type === 1 && (
+										<OText size={10} color={theme.colors.textSecondary}>
+											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+										</OText>
+									)}
+									<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+										orderState?.options?.type === 1
+											? (businessDeliveryTime ?? business?.delivery_time)
+											: (businessPickupTime ?? business?.pickup_time),
+									)} \u2022 `}</OText>
+									<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+								</View>
 							)}
-							<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-								orderState?.options?.type === 1
-									? (businessDeliveryTime ?? business?.delivery_time)
-									: (businessPickupTime ?? business?.pickup_time),
-							)} \u2022 `}</OText>
-							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+						</Metadata>
+					</BusinessContent>
+				</Card>
+			) : (
+				<Placeholder
+					Animation={Fade}
+					style={{ marginBottom: 20 }}>
+					<View style={{ width: '100%' }}>
+						<PlaceholderLine
+							height={200}
+							style={{ marginBottom: 20, borderRadius: 25 }}
+						/>
+						<View style={{ paddingHorizontal: 10 }}>
+							<View
+								style={{
+									flexDirection: 'row',
+									justifyContent: 'space-between',
+								}}>
+								<PlaceholderLine
+									height={25}
+									width={40}
+									style={{ marginBottom: 10 }}
+								/>
+								<PlaceholderLine
+									height={25}
+									width={20}
+									style={{ marginBottom: 10 }}
+								/>
+							</View>
+							<PlaceholderLine
+								height={20}
+								width={30}
+								style={{ marginBottom: 10 }}
+							/>
+							<PlaceholderLine
+								height={20}
+								width={80}
+								style={{ marginBottom: 10 }}
+							/>
 						</View>
-					)}
-				</Metadata>
-			</BusinessContent>
-		</Card>
+					</View>
+				</Placeholder>
+			)}
+		</InView>
 	);
 };
 

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

@@ -49,6 +49,11 @@ 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;