ordering-ui-react-native 0.15.69 → 0.15.70-release

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView } from 'react-native'
+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,
@@ -9,9 +10,12 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig
+	useConfig,
+	useOrderingTheme
 } from 'ordering-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OModal, OText } from '../shared'
+import Alert from '../../providers/AlertProvider'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { SearchBar } from '../SearchBar'
 import { BusinessProductsCategories } from '../BusinessProductsCategories'
@@ -22,13 +26,20 @@ import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer
+	FiltProductsContainer,
+	ContainerSafeAreaView,
+	BackgroundGray,
+	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 = 1000
+const PIXELS_TO_SCROLL = 2000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
@@ -45,10 +56,18 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		errorQuantityProducts,
 		header,
 		logo,
+		alertState,
+		setAlertState,
+		multiRemoveProducts,
 		getNextProducts,
+		handleUpdateProducts,
+		professionalSelected,
+		handleChangeProfessionalSelected,
+		onBusinessClick
 	} = props
 
 	const theme = useTheme();
+	const [orderingTheme] = useOrderingTheme()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
 	const [orderState, { clearCart }] = useOrder()
@@ -56,9 +75,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [, { showToast }] = useToast()
 	const [{ configs }] = useConfig()
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
+
+	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const hideBusinessNearCity = orderingTheme?.theme?.business_view?.components?.near_business?.hidden
+
 	const styles = StyleSheet.create({
 		mainContainer: {
-			flex: 1,
+			flex: 1
 		},
 		BackIcon: {
 			paddingRight: 20,
@@ -80,7 +104,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			padding: 15,
 			justifyContent: 'center',
 			shadowColor: theme.colors.clear,
-		}
+		},
+		businessSkeleton: {
+			borderRadius: 8,
+			marginRight: 20,
+			width: 56,
+			height: 56
+		},
 	})
 
 	const { business, loading, error } = businessState
@@ -93,14 +123,23 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [productListLayout, setProductListLayout] = useState<any>(null)
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
+	const [openService, setOpenService] = useState(false)
+	const [currentProduct, setCurrentProduct] = useState(null)
 
+	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
-
+	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
+	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
 
 	const onProductClick = (product: any) => {
+		if (product?.type === 'service' && professionalSelected) {
+			setCurrentProduct(product)
+			setOpenService(true)
+			return
+		}
 		onRedirect('ProductDetails', {
 			product: product,
 			businessSlug: business.slug,
@@ -114,13 +153,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
+		if (isCheckoutMultiBusinessEnabled) {
+			onRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+			onRedirect('CheckoutNavigator', {
+				screen: 'CheckoutPage',
+				cartUuid: currentCart?.uuid,
+				businessLogo: logo,
+				businessName: business?.name,
+				cartTotal: currentCart?.total
+			})
+		}
 		setOpenUpselling(false)
 	}
 
@@ -165,106 +210,114 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
 
+	const adjustBusiness = async (adjustBusinessId: number) => {
+		const _carts = orderState?.carts?.[adjustBusinessId]
+		const products = _carts?.products
+		const unavailableProducts = products.filter((product: any) => product.valid !== true)
+		const alreadyRemoved = await _retrieveStoreData('already-removed')
+		_removeStoreData('already-removed')
+		if (unavailableProducts.length > 0) {
+			multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
+			return
+		}
+
+		if (alreadyRemoved === 'removed') {
+			setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
+		}
+	}
+
 	const removeCartByReOrder = async () => {
-		const removeCardId = await _retrieveStoreData('remove-cartId')
-		if (currentCart && removeCardId) {
-			clearCart(removeCardId)
-			_removeStoreData('remove-cartId')
-			showToast(ToastType.Info, t('PRODUCT_REMOVED', 'Products removed from cart'))
+		const adjustBusinessId = await _retrieveStoreData('adjust-cart-products')
+		if (currentCart && adjustBusinessId) {
+			_removeStoreData('adjust-cart-products')
+			adjustBusiness(adjustBusinessId)
 		}
 	}
 
 	useEffect(() => {
 		removeCartByReOrder()
-	}, [])
+	}, [currentCart])
 
 	return (
-		<SafeAreaView
-			style={{ flex: 1 }}
-		>
-			<Animated.View style={{ position: 'relative' }}>
-				<TopHeader>
-					{!isOpenSearchBar && (
-						<>
-							<View style={{ ...styles.headerItem, flex: 1 }}>
-								<OButton
-									imgLeftSrc={theme.images.general.arrow_left}
-									imgRightSrc={null}
-									style={styles.btnBackArrow}
-									onClick={() => handleBackNavigation()}
-									imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+		<>
+			<ContainerSafeAreaView
+				style={{ flex: 1 }}
+				isOpenFiltProducts={isOpenFiltProducts}
+			>
+				<Animated.View style={{ position: 'relative' }}>
+					<TopHeader isIos={Platform.OS === 'ios'}>
+						{!isOpenSearchBar && (
+							<>
+								<View style={{ ...styles.headerItem, flex: 1 }}>
+									<OButton
+										imgLeftSrc={theme.images.general.arrow_left}
+										imgRightSrc={null}
+										style={styles.btnBackArrow}
+										onClick={() => handleBackNavigation()}
+										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 30 }}
+									/>
+
+								</View>
+								{!errorQuantityProducts && (
+									<View style={{ ...styles.headerItem }}>
+										<TouchableOpacity
+											onPress={() => setIsOpenSearchBar(true)}
+											style={styles.searchIcon}
+										>
+											<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={16} />
+										</TouchableOpacity>
+									</View>
+								)}
+							</>
+						)}
+						{isOpenSearchBar && (
+							<WrapSearchBar>
+								<SearchBar
+									autoFocus
+									onSearch={handleChangeSearch}
+									onCancel={() => handleCancel()}
+									isCancelXButtonShow
+									noBorderShow
+									placeholder={t('SEARCH_PRODUCTS', 'Search Products')}
+									lazyLoad={businessState?.business?.lazy_load_products_recommended}
 								/>
-							</View>
-							{!errorQuantityProducts && (
-								<View style={{ ...styles.headerItem }}>
-									<TouchableOpacity
-										onPress={() => setIsOpenSearchBar(true)}
-										style={styles.searchIcon}
-									>
-										<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={16} />
-									</TouchableOpacity>
+							</WrapSearchBar>
+						)}
+					</TopHeader>
+					{!hideBusinessNearCity && loading && (
+						<NearBusiness style={{ paddingBottom: 10 }}>
+							<Placeholder Animation={Fade}>
+								<View style={{ flexDirection: 'row' }}>
+									{[...Array(10).keys()].map(i => (
+										<View style={styles.businessSkeleton} key={i}>
+											<PlaceholderLine style={{ width: '100%', height: '100%' }} />
+										</View>
+									))}
 								</View>
-							)}
-						</>
+							</Placeholder>
+						</NearBusiness>
 					)}
-					{isOpenSearchBar && (
-						<WrapSearchBar>
-							<SearchBar
-								onSearch={handleChangeSearch}
-								onCancel={() => handleCancel()}
-								isCancelXButtonShow
-								noBorderShow
-								placeholder={t('SEARCH_PRODUCTS', 'Search Products')}
-								lazyLoad={businessState?.business?.lazy_load_products_recommended}
+					{!hideBusinessNearCity && businessState?.business?.city_id && (
+						<NearBusiness>
+							<BusinessesListing
+								logosLayout
+								propsToFetch={['id', 'logo', 'location', 'timezone', 'schedule', 'open', 'slug']}
+								cityId={businessState?.business?.city_id}
+								onBusinessClick={onBusinessClick}
+								actualSlug={businessState?.business?.slug}
 							/>
-						</WrapSearchBar>
+						</NearBusiness>
 					)}
-				</TopHeader>
-			</Animated.View>
-			<BusinessProductsListingContainer
-				stickyHeaderIndices={[2]}
-				style={styles.mainContainer}
-				ref={scrollViewRef}
-				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
-				onScroll={handlePageScroll}
-				onScrollBeginDrag={handleTouchDrag}
-				scrollEventThrottle={16}
-			>
-				<BusinessBasicInformation
-					navigation={navigation}
-					businessState={businessState}
-					openBusinessInformation={openBusinessInformation}
-					header={header}
-					logo={logo}
-					isPreOrder={isPreOrder}
-				/>
-				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-				{!loading && business?.id && (
-					<>
-						{!(business?.categories?.length === 0) && (
-							<BusinessProductsCategories
-								categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
-								categorySelected={categorySelected}
-								onClickCategory={handleChangeCategory}
-								featured={featuredProducts}
-								openBusinessInformation={openBusinessInformation}
-								scrollViewRef={scrollViewRef}
-								productListLayout={productListLayout}
-								categoriesLayout={categoriesLayout}
-								selectedCategoryId={selectedCategoryId}
-								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-								setSelectedCategoryId={setSelectedCategoryId}
-								setCategoryClicked={setCategoryClicked}
-								
-							/>
-						)}
-					</>
-				)}
-				{!loading && business?.id && (
-					<>
-						<WrapContent
-							onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
-						>
+				</Animated.View>
+
+				{business?.categories?.length > 0 && isOpenFiltProducts && (
+					<FiltProductsContainer
+						isIos={Platform.OS === 'ios'}
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
 							<BusinessProductsList
 								categories={[
 									{ id: null, name: t('ALL', 'All') },
@@ -288,66 +341,201 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								setCategoriesLayout={setCategoriesLayout}
 								currentCart={currentCart}
 								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
+								previouslyProducts={business?.previously_products}
+								navigation={navigation}
+								isFiltMode
 							/>
-						</WrapContent>
-					</>
+						</View>
+					</FiltProductsContainer>
 				)}
-				{loading && !error && (
-					<>
-						<BusinessProductsCategories
-							categories={[]}
-							categorySelected={categorySelected}
-							onClickCategory={handleChangeCategory}
-							featured={featuredProducts}
-							openBusinessInformation={openBusinessInformation}
-							loading={loading}
-						/>
-						<WrapContent>
-							<BusinessProductsList
+				{isOpenFiltProducts && (
+					<BackgroundGray />
+				)}
+				<IOScrollView
+					stickyHeaderIndices={[2]}
+					style={{
+						...styles.mainContainer,
+						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
+							50 : 0
+					}}
+					ref={scrollViewRef}
+					onScroll={handlePageScroll}
+					onScrollBeginDrag={handleTouchDrag}
+					scrollEventThrottle={16}
+				>
+					<BusinessBasicInformation
+						navigation={navigation}
+						businessState={businessState}
+						openBusinessInformation={openBusinessInformation}
+						header={header}
+						logo={logo}
+						isPreOrder={isPreOrder}
+					/>
+					{business?.professionals?.length > 0 && (
+						<ProfessionalFilterWrapper>
+							<OText
+								size={16}
+								style={{ marginBottom: 16 }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+							>
+								{t('PROFESSIONALS', 'Professionals')}
+							</OText>
+							<ProfessionalFilter
+								professionals={business?.professionals}
+								professionalSelected={professionalSelected}
+								handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+							/>
+						</ProfessionalFilterWrapper>
+					)}
+					<View
+						style={{
+							height: 8,
+							backgroundColor: theme.colors.backgroundGray100,
+							marginTop: isChewLayout && showLogo ? 10 : 0
+						}}
+					/>
+					{!loading && business?.id && (
+						<>
+							{!(business?.categories?.length === 0) && (
+								<BusinessProductsCategories
+									categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+									categorySelected={categorySelected}
+									onClickCategory={handleChangeCategory}
+									featured={featuredProducts}
+									openBusinessInformation={openBusinessInformation}
+									scrollViewRef={scrollViewRef}
+									productListLayout={productListLayout}
+									categoriesLayout={categoriesLayout}
+									selectedCategoryId={selectedCategoryId}
+									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+									setSelectedCategoryId={setSelectedCategoryId}
+									setCategoryClicked={setCategoryClicked}
+
+								/>
+							)}
+						</>
+					)}
+					{!loading && business?.id && (
+						<>
+							<WrapContent
+								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
+							>
+								<BusinessProductsList
+									categories={[
+										{ id: null, name: t('ALL', 'All') },
+										{ id: 'featured', name: t('FEATURED', 'Featured') },
+										...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+									]}
+									category={categorySelected}
+									categoryState={categoryState}
+									businessId={business.id}
+									errors={errors}
+									onProductClick={onProductClick}
+									handleSearchRedirect={handleSearchRedirect}
+									featured={featuredProducts}
+									searchValue={searchValue}
+									handleClearSearch={handleChangeSearch}
+									errorQuantityProducts={errorQuantityProducts}
+									handleCancelSearch={handleCancel}
+									categoriesLayout={categoriesLayout}
+									subcategoriesSelected={subcategoriesSelected}
+									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+									setCategoriesLayout={setCategoriesLayout}
+									currentCart={currentCart}
+									setSubcategoriesSelected={setSubcategoriesSelected}
+									onClickCategory={handleChangeCategory}
+									handleUpdateProducts={handleUpdateProducts}
+									navigation={navigation}
+									previouslyProducts={business?.previously_products}
+								/>
+							</WrapContent>
+						</>
+					)}
+					{loading && !error && (
+						<>
+							<BusinessProductsCategories
 								categories={[]}
-								category={categorySelected}
-								categoryState={categoryState}
-								isBusinessLoading={loading}
-								errorQuantityProducts={errorQuantityProducts}
+								categorySelected={categorySelected}
+								onClickCategory={handleChangeCategory}
+								featured={featuredProducts}
+								openBusinessInformation={openBusinessInformation}
+								loading={loading}
 							/>
-						</WrapContent>
-					</>
+							<WrapContent>
+								<BusinessProductsList
+									categories={[]}
+									category={categorySelected}
+									categoryState={categoryState}
+									isBusinessLoading={loading}
+									errorQuantityProducts={errorQuantityProducts}
+									handleUpdateProducts={handleUpdateProducts}
+									navigation={navigation}
+								/>
+							</WrapContent>
+						</>
+					)}
+				</IOScrollView>
+				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
+					<FloatingButton
+						btnText={
+							openUpselling
+								? t('LOADING', 'Loading')
+								: currentCart?.subtotal >= currentCart?.minimum
+									? t('VIEW_ORDER', 'View Order')
+									: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+						}
+						isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
+						btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
+						btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
+						btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
+						btnRightValue={parsePrice(currentCart?.total)}
+						disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
+						handleClick={() => setOpenUpselling(true)}
+					/>
 				)}
-			</BusinessProductsListingContainer>
-			{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-				<FloatingButton
-					btnText={
-						openUpselling
-							? t('LOADING', 'Loading')
-							: currentCart?.subtotal >= currentCart?.minimum
-								? t('VIEW_ORDER', 'View Order')
-								: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
-					}
-					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
-					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-					btnLeftValue={currentCart?.products?.length}
-					btnRightValue={parsePrice(currentCart?.total)}
-					disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
-					handleClick={() => setOpenUpselling(true)}
+				{openUpselling && (
+					<UpsellingRedirect
+						businessId={currentCart?.business_id}
+						business={currentCart?.business}
+						cartProducts={currentCart?.products}
+						cart={currentCart}
+						setOpenUpselling={setOpenUpselling}
+						handleUpsellingPage={handleUpsellingPage}
+						handleCloseUpsellingPage={handleCloseUpsellingPage}
+						openUpselling={openUpselling}
+						canOpenUpselling={canOpenUpselling}
+						setCanOpenUpselling={setCanOpenUpselling}
+						onRedirect={onRedirect}
+					/>
+				)}
+				<Alert
+					open={alertState?.open || false}
+					title=''
+					content={[t('NOT_AVAILABLE_PRODUCTS', 'These products are not available.')]}
+					onAccept={() => setAlertState({ open: false, content: [] })}
+					onClose={() => setAlertState({ open: false, content: [] })}
 				/>
-			)}
-			{openUpselling && (
-				<UpsellingRedirect
-					businessId={currentCart?.business_id}
-					business={currentCart?.business}
-					cartProducts={currentCart?.products}
-					cart={currentCart}
-					setOpenUpselling={setOpenUpselling}
-					handleUpsellingPage={handleUpsellingPage}
-					handleCloseUpsellingPage={handleCloseUpsellingPage}
-					openUpselling={openUpselling}
-					canOpenUpselling={canOpenUpselling}
-					setCanOpenUpselling={setCanOpenUpselling}
-					onRedirect={onRedirect}
+			</ContainerSafeAreaView>
+			<OModal
+				open={openService}
+				onClose={() => setOpenService(false)}
+				entireModal
+			>
+				<ServiceForm
+					navigation={navigation}
+					product={currentProduct}
+					businessSlug={business.slug}
+					businessId={business.id}
+					professionalList={business?.professionals}
+					professionalSelected={professionalSelected}
+					handleChangeProfessional={handleChangeProfessionalSelected}
+					onSave={() => setOpenService(false)}
+					onClose={() => setOpenService(false)}
 				/>
-			)}
-		</SafeAreaView>
+			</OModal>
+		</>
 	)
 }
 

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

@@ -1,5 +1,8 @@
 import styled, { css } from 'styled-components/native'
 
+export const ContainerSafeAreaView = styled.SafeAreaView`
+`
+
 export const WrapHeader = styled.View`
   position: relative;
 `
@@ -11,6 +14,7 @@ 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;
@@ -33,3 +37,32 @@ export const BusinessProductsListingContainer = styled.ScrollView`
     margin-bottom: 50px;
   `}
 `
+
+export const FiltProductsContainer = styled.ScrollView`
+  position: absolute;
+  width: 100%;
+  z-index: 2000;
+  top: ${(props : any) => props.isIos ? '40px': '80px'};
+  margin-top: 20px;
+`
+
+export const BackgroundGray = styled.View`
+  flex: 1;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  position: absolute; 
+  margin-top: 100px; 
+  z-index: 100;
+  width: 100%;
+`
+
+export const ProfessionalFilterWrapper = styled.View`
+  padding-left: 40px;
+  margin-bottom: 35px;
+`
+
+export const NearBusiness = styled.View`
+  width: 100%;
+  padding-left: 20px;
+  max-height: 80px;
+`

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
@@ -22,6 +22,7 @@ import {
 import { BusinessReviewsParams } from '../../types';
 import { ProgressBar, TouchableRipple } from 'react-native-paper';
 import moment from 'moment';
+import { setLocalMoment } from '../../utils';
 
 const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const { businessState, reviewsList } = props;
@@ -99,6 +100,10 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 		</View>
 	);
 
+	useEffect(() => {
+		setLocalMoment(moment, t)
+	}, [])
+
 	return (
 		<BusinessReviewsContainer>
 			<BusinessReviewContent