ordering-ui-react-native 0.16.52 → 0.16.55

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
@@ -138,27 +139,27 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	}
 
 	return (
-		<InView triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
-			<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}
+		<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}
 						>
-							{business?.ribbon?.text}
-						</OText>
-					</RibbonBox>
-				)}
-				{isIntersectionObserver && (
+							<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 }}
@@ -186,10 +187,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							)}
 						</BusinessState>
 					</BusinessHero>
-				)}
-				<BusinessContent>
-					<BusinessInfo>
-						{isIntersectionObserver && (
+					<BusinessContent>
+						<BusinessInfo>
 							<BusinessLogo style={styles.businessLogo}>
 								<FastImage
 									style={{ width: 56, height: 56 }}
@@ -200,64 +199,103 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 									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>
+							<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 '}`}
+						<Metadata>
+							{!isBusinessOpen ? (
+								<View style={styles.closed}>
+									<OText size={10} color={theme.colors.red}>
+										{t('CLOSED', 'Closed')}
 									</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>
+							) : (
+								<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>
+							)}
+						</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>
-						)}
-					</Metadata>
-				</BusinessContent>
-			</Card>
+							<PlaceholderLine
+								height={20}
+								width={30}
+								style={{ marginBottom: 10 }}
+							/>
+							<PlaceholderLine
+								height={20}
+								width={80}
+								style={{ marginBottom: 10 }}
+							/>
+						</View>
+					</View>
+				</Placeholder>
+			)}
 		</InView>
 	);
 };

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

@@ -33,6 +33,7 @@ import { convertHoursToMinutes } from '../../utils'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
 import { MyOrders } from '../MyOrders'
+import { useIsFocused } from '@react-navigation/native';
 
 
 export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
@@ -82,6 +83,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { level: '5', content: '$$$$$' }
   ]
 
+  const isFocused = useIsFocused();
+
   const styles = StyleSheet.create({
     container: {
       paddingHorizontal: 40,
@@ -217,6 +220,11 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleSearchbusinessAndProducts(true)
   }, [])
 
+  
+  useEffect(() => {
+    handleChangeTermValue('')
+  }, [isFocused])
+
   const MaxSectionItem = ({ title, options, filter }: any) => {
     const parseValue = (option: number) => {
       return filter === 'max_distance'
@@ -309,9 +317,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   return (
     <ScrollView style={styles.container}>
       <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
-        <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', paddingVertical: 20 }}>
-          <OIcon src={theme.images.general.arrow_left} width={20} />
-        </TouchableOpacity>
         <OText
           size={20}
           mBottom={15}
@@ -323,6 +328,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       </WrapHeader>
       <SearchWrapper>
         <SearchBar
+          autoFocus
           lazyLoad
           inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
           placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}

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

@@ -10,7 +10,8 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig
+	useConfig,
+	useOrderingTheme
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import Alert from '../../providers/AlertProvider'
@@ -24,17 +25,18 @@ import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer,
 	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,9 +74,14 @@ 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,
+			flex: 1
 		},
 		BackIcon: {
 			paddingRight: 20,
@@ -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 && (
@@ -310,11 +331,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				{isOpenFiltProducts && (
 					<BackgroundGray />
 				)}
-				<BusinessProductsListingContainer
+				<IOScrollView
 					stickyHeaderIndices={[2]}
-					style={styles.mainContainer}
+					style={{
+						...styles.mainContainer,
+						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
+							50 : 0
+					}}
 					ref={scrollViewRef}
-					isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
 					onScroll={handlePageScroll}
 					onScrollBeginDrag={handleTouchDrag}
 					scrollEventThrottle={16}
@@ -343,7 +367,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 +396,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 					{!loading && business?.id && (
-						<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
+						<>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
 							>
@@ -397,7 +427,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									handleUpdateProducts={handleUpdateProducts}
 								/>
 							</WrapContent>
-						</IOScrollView>
+						</>
 					)}
 					{loading && !error && (
 						<>
@@ -421,8 +451,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapContent>
 						</>
 					)}
-				</BusinessProductsListingContainer>
-
+				</IOScrollView>
 				{!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

@@ -270,7 +270,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}
@@ -469,32 +469,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				<IOScrollView>
-					{businessesList.businesses?.map(
-						(business: any, i: number) => (
-							<BusinessController
-								key={`${business.id}_` + i}
-								enableIntersection
-								business={business}
-								isBusinessOpen={business.open}
-								handleCustomClick={handleBusinessClick}
-								orderType={orderState?.options?.type}
-								navigation={navigation}
-								businessHeader={business?.header}
-								businessFeatured={business?.featured}
-								businessLogo={business?.logo}
-								businessReviews={business?.reviews}
-								businessDeliveryPrice={business?.delivery_price}
-								businessDeliveryTime={business?.delivery_time}
-								businessPickupTime={business?.pickup_time}
-								businessDistance={business?.distance}
-								handleUpdateBusinessList={handleUpdateBusinessList}
-								favoriteIds={favoriteIds}
-								setFavoriteIds={setFavoriteIds}
-							/>
-						)
-					)}
-				</IOScrollView>
+				{businessesList.businesses?.map(
+					(business: any, i: number) => (
+						<BusinessController
+							key={`${business.id}_` + i}
+							enableIntersection
+							business={business}
+							isBusinessOpen={business.open}
+							handleCustomClick={handleBusinessClick}
+							orderType={orderState?.options?.type}
+							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
+						/>
+					)
+				)}
 				{businessesList.loading && (
 					<>
 						{[
@@ -547,7 +545,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</>
 				)}
 			</ListWrapper>
-		</ScrollView>
+		</IOScrollView>
 	);
 };