ordering-ui-react-native 0.16.48 → 0.16.49-release

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

@@ -1,8 +1,5 @@
 import styled, { css } from 'styled-components/native'
 
-export const ContainerSafeAreaView = styled.SafeAreaView`
-`
-
 export const WrapHeader = styled.View`
   position: relative;
 `
@@ -14,7 +11,6 @@ export const TopHeader = styled.View`
   z-index: 1;
   height: 60px;
   min-height: 60px;
-  margin-top: ${(props : any) => props.isIos ? '0' : '40px'};
 `
 export const AddressInput = styled.TouchableOpacity`
   flex: 1;
@@ -41,18 +37,16 @@ export const BusinessProductsListingContainer = styled.ScrollView`
 export const FiltProductsContainer = styled.ScrollView`
   position: absolute;
   width: 100%;
-  z-index: 2000;
-  top: ${(props : any) => props.isIos ? '40px': '80px'};
-  margin-top: 20px;
+  z-index: 20000;
 `
 
 export const BackgroundGray = styled.View`
   flex: 1;
-  height: 100%;
+  height: ${(props: any) => props.isIos ? '80%' : '100%'};
   background-color: rgba(0,0,0,0.5);
-  position: absolute; 
-  margin-top: 100px; 
-  z-index: 100;
+  position: absolute;
+  margin-top: 100px;
+  z-index: 10000;
   width: 100%;
 `
 
@@ -60,3 +54,16 @@ export const ProfessionalFilterWrapper = styled.View`
   padding-left: 40px;
   margin-bottom: 35px;
 `
+
+export const NearBusiness = styled.View`
+  width: 100%;
+  padding-left: 20px;
+  max-height: 80px;
+`
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  padding-horizontal: 30px;
+  width: 100px;
+`;

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

@@ -38,6 +38,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
+	const defaultImage = (name : string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
 
 	useEffect(() => {
 		if(typesState?.types?.length > 0){
@@ -197,9 +198,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									isOpenAllCategories && setIsOpenAllCategories(false)
 								}}
 							>
-								{item.image ? (
+								{(defaultImage(item.name) || item.image) ? (
 									<OIcon
-										url={item.image}
+										url={typeof item.name === 'number' ? item.image || defaultImage(item.name) : defaultImage(item.name) || item.image}
 										style={styles.logo}
 									/>
 								) : (

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { IOScrollView } from 'react-native-intersection-observer'
 import Geolocation from '@react-native-community/geolocation'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
@@ -21,6 +22,7 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Search,
@@ -32,7 +34,7 @@ import {
 	FeaturedWrapper,
 	OrderProgressWrapper,
 	FarAwayMessage,
-  SearchBarWrapper,
+	SearchBarWrapper,
 	MomentWrapper,
 	FilterWrapper,
 	ServiceWrapper,
@@ -70,8 +72,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		isGuestUser,
 		handleUpdateBusinessList,
 		priceLevelSelected,
-    handleChangePriceLevel,
-    businessTypeSelected
+		handleChangePriceLevel,
+		businessTypeSelected
 	} = props;
 	const theme = useTheme();
 	const isFocused = useIsFocused();
@@ -269,7 +271,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}, [businessesList?.businesses?.length])
 
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -282,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 }}>
-						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+						<IconAntDesign name='arrowleft' size={26} />
 					</TouchableOpacity>
 				)}
 				<Search>
@@ -319,7 +321,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}
@@ -327,22 +337,23 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 						{!businessId && (
-              <SearchBarWrapper>
-                <SearchBar
-                  onSearch={handleChangeSearch}
-                  searchValue={searchValue}
-                  lazyLoad
-                  isCancelXButtonShow={!!searchValue}
-                  borderStyle={styles.borderStyle}
-                  onCancel={() => handleChangeSearch('')}
-                  placeholder={t('SEARCH', 'Search')}
-                  height={80}
-                  isAppointment
-                  isDisabled={!businessTypes}
-                  inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-                  onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
-                />
-              </SearchBarWrapper>
+							<SearchBarWrapper>
+								<SearchBar
+									onSearch={handleChangeSearch}
+									searchValue={searchValue}
+									lazyLoad
+									isCancelXButtonShow={!!searchValue}
+									borderStyle={styles.borderStyle}
+									onCancel={() => handleChangeSearch('')}
+									placeholder={t('SEARCH', 'Search')}
+									height={80}
+									isAppointment
+									isDisabled={!businessTypes || configs?.advanced_business_search_enabled?.value === '1'}
+									inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+									onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
+									onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
+								/>
+							</SearchBarWrapper>
 						)}
 					</View>
 				</OrderControlContainer>
@@ -463,6 +474,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					(business: any, i: number) => (
 						<BusinessController
 							key={`${business.id}_` + i}
+							enableIntersection
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -534,7 +546,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</>
 				)}
 			</ListWrapper>
-		</ScrollView>
+		</IOScrollView>
 	);
 };
 

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`