ordering-ui-react-native 0.17.51 → 0.17.52-release

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

@@ -7,7 +7,7 @@ export const TopHeader = styled.View`
   width: 100%;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ hideArrow }: any) => hideArrow ? 'flex-end' : 'space-between'};
   z-index: 1;
   height: 60px;
   min-height: 60px;
@@ -24,7 +24,7 @@ export const WrapSearchBar = styled.View`
   flex: 1;
 `
 export const WrapContent = styled.View`
-  padding: 10px 40px;
+  padding-vertical: 10px;
 `
 
 export const BusinessProductsListingContainer = styled.ScrollView`

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

@@ -3,6 +3,7 @@ import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
 	useOrder,
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
@@ -30,6 +31,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const theme = useTheme();
 	const [searchReview, setSearchReview] = useState('')
 	const [orderState] = useOrder();
+	const [{ parseDate }] = useUtils()
 
 	const styles = StyleSheet.create({
 		starIcon: {
@@ -94,7 +96,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
 			<OText size={12} color={theme.colors.textSecondary}>
-				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
+				{parseDate(created_at, { outputFormat: 'MMMM D, YYYY • hh:mm A' })}
 			</OText>
 			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>

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

@@ -284,7 +284,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<IconAntDesign name='arrowleft' size={26} />
+						<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 					</TouchableOpacity>
 				)}
 				<Search>

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

@@ -18,8 +18,7 @@ import {
 	useSession,
 	useOrder,
 	useConfig,
-	useUtils,
-	useOrderingTheme
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
@@ -32,7 +31,6 @@ import {
 	HeaderWrapper,
 	ListWrapper,
 	FeaturedWrapper,
-	OrderProgressWrapper,
 	FarAwayMessage,
 	AddressInputContainer,
 	PreorderInput,
@@ -40,8 +38,7 @@ import {
 	BusinessLogosContainer
 } from './styles';
 
-import { SearchBar } from '../../../SearchBar';
-import { OButton, OIcon, OText, OBottomPopup, OModal } from '../../../shared';
+import { OIcon, OText, OModal } from '../../../shared';
 import { BusinessesListingParams } from '../../../../types';
 import { NotFoundSource } from '../../../NotFoundSource';
 import { BusinessTypeFilter } from '../../../BusinessTypeFilter';
@@ -50,12 +47,13 @@ import { OrderTypeSelector } from '../../../OrderTypeSelector';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../../../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../../../HighestRatedBusinesses';
-import { getTypesText, convertToRadian } from '../../../../utils';
+import { getTypesText } from '../../../../utils';
 import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { PageBanner } from '../../../PageBanner'
+import { CitiesControl } from '../../../CitiesControl'
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -63,12 +61,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
 		navigation,
 		businessesList,
-		searchValue,
 		getBusinesses,
 		handleChangeBusinessType,
 		handleBusinessClick,
 		paginationProps,
-		handleChangeSearch,
 		businessId,
 		isGuestUser,
 		handleUpdateBusinessList,
@@ -77,15 +73,26 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		logosLayout
 	} = props;
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
+
+	const [, t] = useLanguage();
+	const [{ user, auth }] = useSession();
+	const [orderState, { changeCityFilter }] = useOrder();
+	const [{ configs }] = useConfig();
+	const [{ parseDate }] = useUtils();
+
 	const appState = useRef(AppState.currentState)
-	const searchBarRef = useRef<any>()
-	const [appStateVisible, setAppStateVisible] = useState(appState.current);
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
-	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const [refreshing] = useState(false);
-	const bgHeader =  orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image 
+	const allCitiesDisabled = citiesState?.cities?.every((city: any) => !city.enabled)
+	const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2 || allCitiesDisabled) ?? true
+	const hideHero = theme?.business_listing_view?.components?.business_hero?.hidden
+	const hidePreviousOrders = theme?.business_listing_view?.components?.previous_orders_block?.hidden
+	const hideHighestBusiness = theme?.business_listing_view?.components?.highest_rated_business_block?.hidden
+	const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
+	const bgHeader = theme?.business_listing_view?.components?.business_hero?.components?.image
+	const bgHeaderHeight = theme?.business_listing_view?.components?.business_hero?.components?.style?.height
+
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -138,7 +145,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			minHeight: 45,
 			paddingVertical: 5,
 			paddingHorizontal: 20,
-			borderWidth: 1
+			borderWidth: 1,
+			justifyContent: 'center'
 		},
 		businessSkeleton: {
 			borderRadius: 8,
@@ -148,19 +156,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 	});
 
-
-	const [, t] = useLanguage();
-	const [{ user, auth }] = useSession();
-	const [orderState, { changeCityFilter }] = useOrder();
-	const [{ configs }] = useConfig();
-	const [{ parseDate }] = useUtils();
-
 	const { top } = useSafeAreaInsets();
 
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options?.value)
 	const [isOpenCities, setIsOpenCities] = useState(false)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
@@ -193,6 +194,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	};
 
+	const convertToRadian = (value: number) => {
+		return value * Math.PI / 180
+	}
+
 	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
 		const R = 6371 // km
 		const dLat = convertToRadian(lat2 - lat1)
@@ -220,7 +225,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	useEffect(() => {
 		if (!businessesList?.loading) {
-			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
+			const fb = businessesList.businesses.filter((b) => b?.featured && b?.open);
 			const ary = [];
 			while (fb.length > 0) {
 				ary.push(fb.splice(0, 2));
@@ -289,6 +294,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		setIsOpenCities(false)
 	}, [orderState?.options?.city_id])
 
+	useEffect(() => {
+		if (!citiesState?.cities?.length || !orderState?.options?.city_id) return
+		const selectedCity = citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)
+		if (!selectedCity || !selectedCity?.enabled) changeCityFilter(null)
+	}, [citiesState, orderState?.options?.city_id])
+
 	if (logosLayout) {
 		return (
 			<BusinessLogosContainer
@@ -314,10 +325,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									key={business?.id}
 									onPress={() => handleBusinessClick && handleBusinessClick(business)}
 									style={{
-										width: 57,
-										height: 58,
-										borderBottomColor: theme.colors.primary,
-										borderBottomWidth: business?.slug === actualSlug ? 2 : 0,
+										width: 60,
+										height: 60,
+										borderRadius: 8,
 										marginRight: 5
 									}}
 								>
@@ -326,8 +336,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 											width: 56,
 											height: 56,
 											marginRight: 20,
-											borderTopLeftRadius: 7.6,
-											borderTopRightRadius: 7.6
+											borderRadius: 8,
+											borderColor: theme.colors.primary,
+											borderWidth: business?.slug === actualSlug ? 2 : 0
 										}}
 										source={{
 											uri: business?.logo,
@@ -370,8 +381,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			>
 				{isChewLayout && (
 					<View style={{ marginTop: 30, paddingHorizontal: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
-						<OText size={18} weight={700} color={theme.colors?.white}>
-							{t('WELCOME', 'Welcome')} {user?.name}!
+						<OText size={24} weight={700} color={theme.colors?.white}>
+							{t('WELCOME', 'Welcome')} {user?.name}
 						</OText>
 					</View>
 				)}
@@ -466,18 +477,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				)}
 			</View>
 			{!isChewLayout ? (
-				<HeaderWrapper
-					source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
-					style={{ paddingTop: top + 20 }}
-					resizeMode='stretch'
-				>
-					{!auth && (
-
-						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<IconAntDesign name='arrowleft' size={26} />
-						</TouchableOpacity>
+				<>
+					{!hideHero ? (
+						<HeaderWrapper
+							source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
+							style={{ paddingTop: top + 20 }}
+							resizeMode='cover'
+							bgHeaderHeight={bgHeaderHeight}
+						>
+							{!auth && (
+								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+								</TouchableOpacity>
+							)}
+						</HeaderWrapper>
+					) : (
+						<>
+							{!auth && (
+								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+								</TouchableOpacity>
+							)}
+						</>
 					)}
-				</HeaderWrapper>
+				</>
 			) : (
 				<OrderTypesContainer>
 					<OrderTypeSelector
@@ -494,6 +517,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					<TouchableOpacity
 						style={styles.buttonCityStyle}
 						onPress={() => setIsOpenCities(true)}
+						disabled={orderState?.loading}
 					>
 						<OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
 							{citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
@@ -501,12 +525,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</TouchableOpacity>
 				</View>
 			)}
-			<OrderProgressWrapper>
+			{!hidePreviousOrders && (
 				<OrderProgress
 					{...props}
 					isFocused={isFocused}
 				/>
-			</OrderProgressWrapper>
+			)}
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
@@ -539,23 +563,27 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</FeaturedWrapper>
 				)
 			}
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			{
-				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses
-						onBusinessClick={handleBusinessClick}
-						navigation={navigation}
-						favoriteIds={favoriteIds}
-						setFavoriteIds={setFavoriteIds}
-					/>
-				)
-			}
+			{!isChewLayout && !hideHighestBusiness && (
+				<>
+					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
+					{
+						!businessId && !props.franchiseId && (
+							<HighestRatedBusinesses
+								onBusinessClick={handleBusinessClick}
+								navigation={navigation}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					}
+				</>
+			)}
 
-			<PageBanner position='app_business_listing' />
+			<PageBanner position='app_business_listing' navigation={navigation} />
 
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<ListWrapper>
-				{!businessId && (
+			<ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+				{!businessId && !isAllCategoriesHidden && (
 					<BusinessTypeFilter
 						images={props.images}
 						businessTypes={props.businessTypes}
@@ -564,7 +592,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						setBusinessTypes={setBusinessTypes}
 					/>
 				)}
-				{!businessesList.loading && businessesList.businesses.length === 0 && (
+				{!businessesList.loading && businessesList.businesses.length === 0 && businessesList?.fetched && (
 					<NotFoundSource
 						content={t(
 							'NOT_FOUND_BUSINESSES',
@@ -577,6 +605,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<BusinessController
 							key={`${business.id}_` + i}
 							enableIntersection
+							isCustomLayout={isChewLayout}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -596,7 +625,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						/>
 					)
 				)}
-				{businessesList.loading && (
+				{(businessesList.loading || !businessesList?.fetched) && (
 					<>
 						{[
 							...Array(
@@ -653,25 +682,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				onClose={() => setIsOpenCities(false)}
 				title={t('SELECT_A_CITY', 'Select a city')}
 			>
-				<View style={{ padding: 40, width: '100%' }}>
-					{citiesState?.cities?.map((city: any) => (
-						<TouchableOpacity
-							key={city?.id}
-							style={{
-								padding: 10,
-								borderBottomWidth: 1,
-								borderBottomColor: orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.backgroundGray,
-								marginBottom: 10,
-							}}
-							onPress={() => handleChangeCity(city?.id)}
-							disabled={orderState?.loading}
-						>
-							<OText color={orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.black}>
-								{city?.name}
-							</OText>
-						</TouchableOpacity>
-					))}
-				</View>
+				<CitiesControl
+					cities={citiesState?.cities}
+					onClose={() => setIsOpenCities(false)}
+					handleChangeCity={handleChangeCity}
+				/>
 			</OModal>
 		</IOScrollView>
 	);

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

@@ -60,30 +60,20 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-  height: 5%;
-	min-height: 270px;
-	max-height: 400px;
+  height: 270px;
 	padding: 20px 40px;
 	background-color: transparent;
 `;
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
 `;
 
 export const FeaturedWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	height: 220px;
 	paddingVertical: 30px;
 `;
 
-export const OrderProgressWrapper = styled.View`
-  margin-top: 37px;
-  margin-bottom: 20px;
-	padding-horizontal: 40px;
-`
-
 export const FarAwayMessage = styled.View`
   flex-direction: row;
   align-items: center;

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

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react'
 import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';