ordering-ui-react-native 0.16.51 → 0.16.54

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
-import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
+import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
@@ -38,6 +38,7 @@ export const BusinessBasicInformation = (
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
+	const [orderingTheme] = useOrderingTheme()
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
@@ -45,13 +46,15 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-
+	const isChewLayout = theme?.layouts?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const showLogo = !orderingTheme?.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: {
 			width: 72,
@@ -62,7 +65,7 @@ export const BusinessBasicInformation = (
 		},
 		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',
@@ -102,6 +105,16 @@ export const BusinessBasicInformation = (
 			width: 12,
 			margin: 0,
 			padding: 0
+		},
+		headerChewStyle: {
+			paddingHorizontal: 30,
+			justifyContent: 'center',
+			height: '100%'
+		},
+		socialIconsChewContainer: {
+			flexDirection: 'row',
+			justifyContent: 'flex-start',
+			marginTop: 5
 		}
 	});
 
@@ -135,14 +148,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 +185,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 +203,7 @@ export const BusinessBasicInformation = (
 						showsVerticalScrollIndicator={false}
 						showsHorizontalScrollIndicator={false}
 						horizontal
-						contentContainerStyle={{ flex: 1}}
+						contentContainerStyle={{ flex: 1 }}
 					>
 						{!!business?.facebook_profile && (
 							<SocialNetWork
@@ -285,7 +222,7 @@ export const BusinessBasicInformation = (
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
-										style={{ width: '100%', height: '100%'}}
+										style={{ width: '100%', height: '100%' }}
 									/>
 								</View>
 							</TouchableOpacity>
@@ -308,72 +245,190 @@ export const BusinessBasicInformation = (
 								iconTitle='snapchat'
 							/>
 						)}
+						{isChewLayout && (
+							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
+								<OText style={{textDecorationColor: theme.colors.black, textDecorationLine: 'underline'}}>
+									{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 }
+				}
+				source={{
+					uri:
+						header ||
+						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
+				}}
+				imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
+			>
+				{!isBusinessInfoShow && !isChewLayout && (
+					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
+						<OIcon src={theme.images.general.info} width={24} />
+					</WrapBusinessInfo>
+				)}
+				{isChewLayout && (
+					<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}>
+						{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>
+				)}
+				{!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'}>
+										{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() })}>
+									{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('PRE_ORDER', '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

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;

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

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
-import { IOScrollView } from 'react-native-intersection-observer'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -10,7 +9,8 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig
+	useConfig,
+	useOrderingTheme
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import Alert from '../../providers/AlertProvider'
@@ -28,13 +28,15 @@ import {
 	FiltProductsContainer,
 	ContainerSafeAreaView,
 	BackgroundGray,
-	ProfessionalFilterWrapper
+	ProfessionalFilterWrapper,
+	NearBusiness
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { UpsellingRedirect } from './UpsellingRedirect'
 import Animated from 'react-native-reanimated'
 import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
+import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -59,10 +61,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		getNextProducts,
 		handleUpdateProducts,
 		professionalSelected,
-		handleChangeProfessionalSelected
+		handleChangeProfessionalSelected,
+		onBusinessClick
 	} = props
 
 	const theme = useTheme();
+	const [orderingTheme] = useOrderingTheme()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
 	const [orderState, { clearCart }] = useOrder()
@@ -70,6 +74,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [, { showToast }] = useToast()
 	const [{ configs }] = useConfig()
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
+
+	const isChewLayout = theme?.layouts?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const showBusinessNearCity = !theme?.layouts?.business_view?.components?.near_business?.hidden
+
 	const styles = StyleSheet.create({
 		mainContainer: {
 			flex: 1,
@@ -240,6 +249,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 										onClick={() => handleBackNavigation()}
 										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 30 }}
 									/>
+
 								</View>
 								{!errorQuantityProducts && (
 									<View style={{ ...styles.headerItem }}>
@@ -267,6 +277,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapSearchBar>
 						)}
 					</TopHeader>
+					{showBusinessNearCity && (
+						<NearBusiness>
+							<BusinessesListing
+								logosLayout
+								propsToFetch={['id', 'logo', 'location', 'timezone', 'schedule', 'open', 'slug']}
+								cityId={businessState?.business?.city_id}
+								onBusinessClick={onBusinessClick}
+								actualSlug={businessState?.business?.slug}
+							/>
+						</NearBusiness>
+					)}
 				</Animated.View>
 
 				{business?.categories?.length > 0 && isOpenFiltProducts && (
@@ -343,7 +364,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							/>
 						</ProfessionalFilterWrapper>
 					)}
-					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
+					<View
+						style={{
+							height: 8,
+							backgroundColor: theme.colors.backgroundGray100,
+							marginTop: isChewLayout && showLogo ? 10 : 0
+						}}
+					/>
 					{!loading && business?.id && (
 						<>
 							{!(business?.categories?.length === 0) && (
@@ -366,7 +393,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 					{!loading && business?.id && (
-						<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
+						<>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
 							>
@@ -397,7 +424,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									handleUpdateProducts={handleUpdateProducts}
 								/>
 							</WrapContent>
-						</IOScrollView>
+						</>
 					)}
 					{loading && !error && (
 						<>
@@ -422,7 +449,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 				</BusinessProductsListingContainer>
-
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 					<FloatingButton
 						btnText={

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

@@ -60,3 +60,8 @@ export const ProfessionalFilterWrapper = styled.View`
   padding-left: 40px;
   margin-bottom: 35px;
 `
+
+export const NearBusiness = styled.View`
+  width: 100%;
+  padding-left: 20px;
+`

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx

@@ -320,7 +320,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</MomentWrapper>
 					<View style={styles.wrapperOrderOptions}>
 						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
+							<OText
+								size={12}
+								numberOfLines={1}
+								ellipsizeMode={'tail'}
+								color={theme.colors.textSecondary}
+								style={{ textAlign: 'left' }}
+							>
+								{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}
+							</OText>
 							<OIcon
 								src={theme.images.general.arrow_down}
 								width={10}

package/themes/original/src/components/BusinessesListing/Layout/Appointment/styles.tsx

@@ -43,8 +43,9 @@ export const WrapMomentOption = styled.TouchableOpacity`
   font-size: 12px;
   max-width: 240px;
   height: 26px;
+  width: 130px;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   padding-horizontal: 8px;
   flex-direction: row;
   margin-end: 12px;
@@ -84,7 +85,7 @@ export const FarAwayMessage = styled.View`
 `
 
 export const SearchBarWrapper = styled.View`
-  width: 100px;
+  width: 130px;
 `
 
 export const MomentWrapper = styled.View`