ordering-ui-react-native 0.15.56 → 0.15.58-release

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

@@ -144,7 +144,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   const validateSelectedDate = (curdate: any, menu: any) => {
     const day = moment(curdate).format('d')
-    setIsEnabled(menu?.schedule[day]?.enabled || false)
+    setIsEnabled(menu?.schedule?.[day]?.enabled || false)
   }
 
   const getTimes = (curdate: any, menu: any) => {

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

@@ -57,12 +57,12 @@ const BusinessProductsCategoriesUI = (props: any) => {
 
 		if (!lazyLoadProductsRecommended) {
 			if (category?.id) {
-				scrollViewRef.current.scrollTo({
+				scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
 					y: categoriesLayout[`cat_${category?.id}`]?.y + productListLayout?.y - 70,
 					animated: true
 				})
 			} else {
-				scrollViewRef.current.scrollTo({
+				scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
 					y: productListLayout?.y - 70,
 					animated: true
 				})

package/themes/original/src/components/BusinessProductsList/CategoryDescription/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { OModal, OText, OIcon } from '../../shared'
+import { ScrollView } from 'react-native'
+import { useUtils } from 'ordering-components/native'
+
+interface CategoryDescriptionParams {
+    openDescription?: {name: string, image: string, description: string} | null,
+    setOpenDescription: any;
+}
+
+function categoryDescriptionPropsAreEqual(prev : any, next : any) {
+    return prev.openDescription === next.openDescription
+}
+
+const CategoryDescription = (props : CategoryDescriptionParams) => {
+    const [{ optimizeImage }] = useUtils()
+    return (
+        <OModal
+            open={!!props.openDescription}
+            onClose={() => props.setOpenDescription(null)}
+            styleContainerCloseButton={{
+                marginLeft: -37,
+                width: 55,
+                height: 55,
+                marginTop: 2
+            }}
+        >
+            <OText size={20} style={{ paddingLeft: 70, paddingRight: 20, bottom: 25 }}>{props.openDescription?.name}</OText>
+            <ScrollView style={{ padding: 20 }}>
+                {!!props.openDescription?.image && (
+                    <OIcon
+                        url={optimizeImage(props.openDescription?.image, 'h_100,c_limit')}
+                        width={240}
+                        height={240}
+                        style={{ borderRadius: 7.6 }}
+                    />
+                )}
+                <OText mBottom={60}>{props.openDescription?.description}</OText>
+            </ScrollView>
+        </OModal>
+    )
+}
+
+export const CategoryDescriptionMemoized = React.memo(CategoryDescription,categoryDescriptionPropsAreEqual)

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

@@ -4,12 +4,13 @@ import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
 import { OButton, OIcon, OModal, OText } from '../shared';
-import { ProductsContainer, ErrorMessage, WrapperNotFound, RibbonBox } from './styles';
+import { ProductsContainer, ErrorMessage, WrapperNotFound, RibbonBox, SubCategoriesContainer, ContainerButton, HeaderWrapper } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
+import { CategoryDescriptionMemoized } from './CategoryDescription';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -28,7 +29,13 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleCancelSearch,
     categoriesLayout,
     setCategoriesLayout,
-    currentCart
+    currentCart,
+    setSubcategoriesSelected,
+    subcategoriesSelected,
+    onClickCategory,
+    lazyLoadProductsRecommended,
+    handleUpdateProducts,
+    isFiltMode
   } = props;
 
   const [, t] = useLanguage();
@@ -44,20 +51,86 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     setCategoriesLayout(_categoriesLayout)
   }
 
+  const onClickSubcategory = (subCategory: any, parentCategory: any) => {
+    if (parentCategory && lazyLoadProductsRecommended) {
+      onClickCategory(parentCategory)
+    }
+    if (!subCategory) {
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => _subcategory?.parent_category_id !== parentCategory?.id))
+      return
+    }
+    const categoryFounded = subcategoriesSelected.find((_subcategory: any) => subCategory?.id === _subcategory?.id)
+    if (categoryFounded) {
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id))
+    } else {
+      setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
+    }
+  }
+
+  const SubcategoriesComponent = ({ category }: any) => {
+    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
+
+    return (
+      <SubCategoriesContainer>
+        <ContainerButton
+          isSelected={allsubcategorySelected}
+        >
+          <OButton
+            onClick={() => onClickSubcategory(null, category)}
+            bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
+            text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
+            style={bpStyles.categoryButtonStyle}
+            textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
+          />
+        </ContainerButton>
+        {category?.subcategories?.map((subcategory: any) => {
+          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
+          return (
+            <ContainerButton
+              key={subcategory?.id}
+              isSelected={isSubcategorySelected}
+            >
+              <OButton
+                onClick={() => onClickSubcategory(subcategory, category)}
+                bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
+                text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
+                style={bpStyles.categoryButtonStyle}
+                textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
+              />
+            </ContainerButton>
+          )
+        }
+        )}
+      </SubCategoriesContainer>
+    )
+  }
+
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
+      <HeaderWrapper>
+        {category?.subcategories?.length > 0 && (
+          <SubcategoriesComponent category={category} />
+        )}
+      </HeaderWrapper>
       {category.id &&
-        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
-          <SingleProductCard
-            key={'prod_' + product.id}
-            isSoldOut={product.inventoried && !product.quantity}
-            product={product}
-            businessId={businessId}
-            onProductClick={() => onProductClick(product)}
-            productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-          />
-        ))}
-
+        categoryState.products
+          ?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
+          ?.sort((a: any, b: any) => a.rank - b.rank)
+          ?.map((product: any, i: number) => (
+            <SingleProductCard
+              key={'prod_' + product.id + `_${i}`}
+              isSoldOut={product.inventoried && !product.quantity}
+              product={product}
+              businessId={businessId}
+              categoryState={categoryState}
+              onProductClick={() => onProductClick(product)}
+              productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+              handleUpdateProducts={handleUpdateProducts}
+            />
+          ))
+      }
       {!category.id &&
         featured &&
         categoryState?.products?.find((product: any) => product.featured) && (
@@ -72,11 +145,13 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
-                      key={i}
+                      key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
                       businessId={businessId}
+                      categoryState={categoryState}
                       onProductClick={onProductClick}
+                      handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ),
@@ -86,9 +161,14 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         )}
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
-        const products = !isUseParentCategory
+        const _products = !isUseParentCategory
           ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
           : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
+        const products = subcategoriesSelected?.length > 0
+          ? _products?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
+          : _products
 
         const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
 
@@ -132,12 +212,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 </View>
                 {!!category?.description && (
                   <View style={{ position: 'relative' }}>
-                    <OText size={12} weight={'500'} mBottom={5}>
+                    <OText size={12} weight={'500'} mBottom={10} color='#909BA9'>
                       {shortCategoryDescription}
                       {category?.description?.length > 80 && (
                         <OButton
                           style={{ height: 15, paddingRight: 0, paddingLeft: 0, borderWidth: 0 }}
-                          text={t('SEE_MORE', 'See more')}
+                          text={t('VIEW_MORE', 'View more')}
                           parentStyle={{ padding: 0 }}
                           onClick={() => setOpenDescription(category)}
                           bgColor='transparent'
@@ -152,14 +232,19 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     </OText>
                   </View>
                 )}
+                {category?.subcategories?.length > 0 && !isFiltMode && (
+                  <SubcategoriesComponent category={category} />
+                )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
-                      key={i}
+                      key={`${product?.id}_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
+                      categoryState={categoryState}
                       onProductClick={onProductClick}
+                      handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ))}
@@ -195,6 +280,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !isBusinessLoading &&
         categoryState.products.length === 0 &&
         !errors &&
+        !isFiltMode &&
         !(
           (searchValue && errorQuantityProducts) ||
           (!searchValue && !errorQuantityProducts)
@@ -234,23 +320,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
-      <OModal
-        open={!!openDescription}
-        title={openDescription?.name}
-        onClose={() => setOpenDescription(null)}
-      >
-        <ScrollView style={{ padding: 20 }}>
-          {!!openDescription?.image && (
-            <OIcon
-              url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
-              width={240}
-              height={240}
-              style={{ borderRadius: 7.6 }}
-            />
-          )}
-          <OText mBottom={40}>{openDescription?.description}</OText>
-        </ScrollView>
-      </OModal>
+      {!!openDescription && (
+        <CategoryDescriptionMemoized
+          openDescription={openDescription}
+          setOpenDescription={setOpenDescription}
+        />
+      )}
     </ProductsContainer>
   );
 };
@@ -265,6 +340,15 @@ const bpStyles = StyleSheet.create({
     shadowRadius: 1,
     marginEnd: 13,
   },
+  categoryButtonStyle: {
+    borderWidth: 0,
+    marginLeft: 5,
+    marginRight: 5,
+    marginBottom: 10,
+    height: 35,
+    paddingLeft: 3,
+    paddingRight: 3,
+  }
 });
 
 export const BusinessProductsList = (props: BusinessProductsListParams) => {

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

@@ -18,16 +18,24 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
-`
+`
+
+export const SubCategoriesContainer = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+`
+
+export const ContainerButton = styled.View`
+`
+
+export const HeaderWrapper = styled.View``

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

@@ -1,5 +1,5 @@
 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 { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -12,6 +12,7 @@ import {
 	useConfig
 } from 'ordering-components/native'
 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 +23,16 @@ import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer
+	BusinessProductsListingContainer,
+	FiltProductsContainer,
+	ContainerSafeAreaView,
+	BackgroundGray
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { UpsellingRedirect } from './UpsellingRedirect'
 import Animated from 'react-native-reanimated'
 
-const PIXELS_TO_SCROLL = 1000
+const PIXELS_TO_SCROLL = 2000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
@@ -45,7 +49,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		errorQuantityProducts,
 		header,
 		logo,
+		alertState,
+		setAlertState,
+		multiRemoveProducts,
 		getNextProducts,
+		handleUpdateProducts
 	} = props
 
 	const theme = useTheme();
@@ -92,9 +100,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
 	const [productListLayout, setProductListLayout] = useState<any>(null)
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
+	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
+	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)
 	}
@@ -113,13 +124,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)
 	}
 
@@ -164,25 +181,41 @@ 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
+		<ContainerSafeAreaView
 			style={{ flex: 1 }}
+			isOpenFiltProducts={isOpenFiltProducts}
 		>
 			<Animated.View style={{ position: 'relative' }}>
-				<TopHeader>
+				<TopHeader isIos={Platform.OS === 'ios'}>
 					{!isOpenSearchBar && (
 						<>
 							<View style={{ ...styles.headerItem, flex: 1 }}>
@@ -220,6 +253,47 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</TopHeader>
 			</Animated.View>
+
+			{business?.categories?.length > 0 && isOpenFiltProducts && (
+					<FiltProductsContainer
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
+							<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}
+								isFiltMode
+							/>
+						</View>
+					</FiltProductsContainer>
+			)}
+			{isOpenFiltProducts && (
+				<BackgroundGray />
+			)}
 			<BusinessProductsListingContainer
 				stickyHeaderIndices={[2]}
 				style={styles.mainContainer}
@@ -254,6 +328,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
 								setCategoryClicked={setCategoryClicked}
+
 							/>
 						)}
 					</>
@@ -281,8 +356,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								errorQuantityProducts={errorQuantityProducts}
 								handleCancelSearch={handleCancel}
 								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setCategoriesLayout={setCategoriesLayout}
 								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
 							/>
 						</WrapContent>
 					</>
@@ -304,6 +384,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								categoryState={categoryState}
 								isBusinessLoading={loading}
 								errorQuantityProducts={errorQuantityProducts}
+								handleUpdateProducts={handleUpdateProducts}
 							/>
 						</WrapContent>
 					</>
@@ -321,7 +402,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					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}
+					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)}
@@ -342,7 +423,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onRedirect={onRedirect}
 				/>
 			)}
-		</SafeAreaView>
+			<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: [] })}
+			/>
+		</ContainerSafeAreaView>
 	)
 }
 

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,21 @@ 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%;
+`

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

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

@@ -45,7 +45,6 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const renderTypes = ({ item }: any) => {
 		return (
 			<TouchableOpacity
-				key={item.id}
 				onPress={() => handleChangeBusinessType(item.id)}
 				style={{
 					height: 34,
@@ -103,7 +102,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									showsHorizontalScrollIndicator={false}
 									data={typesState?.types}
 									renderItem={renderTypes}
-									keyExtractor={(type) => type.name}
+									keyExtractor={(type, index) => `${type.name}_${index}`}
 								/>
 								<TouchableOpacity
 									style={{ marginLeft: 15 }}