ordering-ui-react-native 0.16.40 → 0.16.41-release

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();
@@ -104,8 +106,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 		searchInput: {
 			fontSize: 12,
-			// backgroundColor: theme.colors.white,
-			paddingLeft: 10,
+			paddingLeft: 0,
+			paddingRight: 17,
 			paddingTop: 7
 		},
 		iconStyle: {
@@ -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`
@@ -97,10 +98,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
   margin-top: 30px;
 `