ordering-ui-react-native 0.12.65 → 0.12.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.65",
+  "version": "0.12.69",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -25,6 +25,8 @@ import {
 import { useTheme } from 'styled-components/native';
 import { ReviewCustomer } from '../ReviewCustomer'
 
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+
 interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
@@ -150,46 +152,56 @@ export const OrderContentComponent = (props: OrderContent) => {
         {
           (order?.customer?.name || order?.customer?.lastname) && (
             <View style={{ flexDirection: 'row' }}>
-              <OText numberOfLines={2} mBottom={4}>
-                {order?.customer?.name && (
-                  <OText
-                    numberOfLines={1}
-                    mBottom={4}
-                    ellipsizeMode="tail"
-                    space>
-                    {order?.customer?.name}
-                  </OText>
-                )}
-                {order?.customer?.middle_name && (
-                  <OText
-                    numberOfLines={1}
-                    mBottom={4}
-                    ellipsizeMode="tail"
-                    space>
-                    {order?.customer?.middle_name}
-                  </OText>
-                )}
-                {order?.customer?.lastname && (
-                  <OText
-                    numberOfLines={1}
-                    mBottom={4}
-                    ellipsizeMode="tail"
-                    space>
-                    {order?.customer?.lastname}
-                  </OText>
-                )}
-                {
-                  order?.customer?.second_lastname && (
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                <View style={{ flexDirection: 'row' }}>
+                  {order?.customer?.name && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
                       ellipsizeMode="tail"
                       space>
-                      {order?.customer?.second_lastname}
+                      {order?.customer?.name}
                     </OText>
-                  )
-                }
-              </OText>
+                  )}
+                  {order?.customer?.middle_name && (
+                    <OText
+                      numberOfLines={1}
+                      mBottom={4}
+                      ellipsizeMode="tail"
+                      space>
+                      {order?.customer?.middle_name}
+                    </OText>
+                  )}
+                  {order?.customer?.lastname && (
+                    <OText
+                      numberOfLines={1}
+                      mBottom={4}
+                      ellipsizeMode="tail"
+                      space>
+                      {order?.customer?.lastname}
+                    </OText>
+                  )}
+                  {
+                    order?.customer?.second_lastname && (
+                      <OText
+                        numberOfLines={1}
+                        mBottom={4}
+                        ellipsizeMode="tail"
+                        space>
+                        {order?.customer?.second_lastname}
+                      </OText>
+                    )
+                  }
+                </View>
+                {order?.user_review?.qualification && (
+                  <View style={{ flexDirection: 'row' }}>
+                    <MaterialIcon style={{ bottom: 2 }} name='star' size={24} color={theme.colors.arrowColor} />
+                    <OText mLeft={5}>
+                      {order?.user_review?.qualification}
+                    </OText>
+                  </View>
+                )}
+              </View>
             </View>
           )
         }

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

@@ -1,13 +1,13 @@
 import React, { useState, useRef, useCallback } from 'react'
 import { View, TouchableOpacity, StyleSheet, TextStyle, ScrollView, I18nManager, Platform } from 'react-native'
 import {
-	BusinessAndProductList,
-	useLanguage,
-	useOrder,
-	useSession,
-	useUtils,
-	useToast,
-	ToastType
+  BusinessAndProductList,
+  useLanguage,
+  useOrder,
+  useSession,
+  useUtils,
+  useToast,
+  ToastType
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -16,15 +16,15 @@ import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { BusinessProductsListingParams } from '../../types'
 import {
-	WrapHeader,
-	TopHeader,
-	AddressInput,
-	WrapSearchBar,
-	WrapContent,
-	BusinessProductsListingContainer,
-	SortWrap,
-	SortButton,
-	CategoryWrap,
+  WrapHeader,
+  TopHeader,
+  AddressInput,
+  WrapSearchBar,
+  WrapContent,
+  BusinessProductsListingContainer,
+  SortWrap,
+  SortButton,
+  CategoryWrap,
 } from './styles'
 import { useTheme } from 'styled-components/native'
 import { FloatingButton } from '../FloatingButton'
@@ -40,347 +40,347 @@ import SocialShareFav from '../SocialShare'
 const PIXELS_TO_SCROLL = 1000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
-	const {
-		navigation,
-		errors,
-		businessState,
-		categoryState,
-		handleChangeSearch,
-		categorySelected,
-		searchValue,
-		handleSearchRedirect,
-		featuredProducts,
-		errorQuantityProducts,
-		header,
-		logo,
-		productModal,
-		handleChangeCategory,
-		setProductLogin,
-		updateProductModal,
-		getNextProducts
-	} = props
-	const theme = useTheme()
+  const {
+    navigation,
+    errors,
+    businessState,
+    categoryState,
+    handleChangeSearch,
+    categorySelected,
+    searchValue,
+    handleSearchRedirect,
+    featuredProducts,
+    errorQuantityProducts,
+    header,
+    logo,
+    productModal,
+    handleChangeCategory,
+    setProductLogin,
+    updateProductModal,
+    getNextProducts
+  } = props
+  const theme = useTheme()
 
-	const styles = StyleSheet.create({
-		mainContainer: {
-			flex: 1,
-			marginTop: 64
-		},
-		BackIcon: {
-			paddingRight: 20,
-		},
-		headerItem: {
-			flexDirection: 'row',
-			alignItems: 'center',
-		},
-		btnBackArrow: {
-			borderWidth: 0,
-			backgroundColor: theme.colors.clear,
-			paddingLeft: I18nManager.isRTL ? 7 : 0,
-			paddingRight: I18nManager.isRTL ? 0 : 7,
-		},
-		searchIcon: {
-			width: 25,
-			height: 25,
-			borderWidth: 0,
-			backgroundColor: theme.colors.white,
-			borderRadius: 24,
-			justifyContent: 'center',
-			alignItems: 'center',
-			shadowOpacity: 0,
-			marginEnd: -6
-		},
-		categorySticky: {
-			position: 'absolute',
-			start: 1,
-			end: 0,
-			top: 0
-		}
-	})
+  const styles = StyleSheet.create({
+    mainContainer: {
+      flex: 1,
+      marginTop: 64
+    },
+    BackIcon: {
+      paddingRight: 20,
+    },
+    headerItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      backgroundColor: theme.colors.clear,
+      paddingLeft: I18nManager.isRTL ? 7 : 0,
+      paddingRight: I18nManager.isRTL ? 0 : 7,
+    },
+    searchIcon: {
+      width: 25,
+      height: 25,
+      borderWidth: 0,
+      backgroundColor: theme.colors.white,
+      borderRadius: 24,
+      justifyContent: 'center',
+      alignItems: 'center',
+      shadowOpacity: 0,
+      marginEnd: -6
+    },
+    categorySticky: {
+      position: 'absolute',
+      start: 1,
+      end: 0,
+      top: 0
+    }
+  })
 
-	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
-	const [orderState] = useOrder()
-	const [{ parsePrice }] = useUtils()
-	const [ ,{showToast}] = useToast()
-	const { business, loading, error } = businessState
-	const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
-	const [curProduct, setCurProduct] = useState(null)
-	const [openUpselling, setOpenUpselling] = useState(false)
-	const [openCart, setOpenCart] = useState(false)
-	const [isCategoryClicked, setCategoryClicked] = useState(false)
-	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
-	const [productListLayout, setProductListLayout] = useState<any>(null)
-	const [selectedCategoryId, setSelectedCategoryId] = useState<any>('cat_all')
+  const [, t] = useLanguage()
+  const [{ auth }] = useSession()
+  const [orderState] = useOrder()
+  const [{ parsePrice }] = useUtils()
+  const [, { showToast }] = useToast()
+  const { business, loading, error } = businessState
+  const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
+  const [curProduct, setCurProduct] = useState(null)
+  const [openUpselling, setOpenUpselling] = useState(false)
+  const [openCart, setOpenCart] = useState(false)
+  const [isCategoryClicked, setCategoryClicked] = useState(false)
+  const [categoriesLayout, setCategoriesLayout] = useState<any>({})
+  const [productListLayout, setProductListLayout] = useState<any>(null)
+  const [selectedCategoryId, setSelectedCategoryId] = useState<any>('cat_all')
 
-	const scrollViewRef = useRef<any>(null)
+  const scrollViewRef = useRef<any>(null)
 
-	const { top } = useSafeAreaInsets();
-	const [sortBy, setSortBy] = useState('alphabet');
+  const { top } = useSafeAreaInsets();
+  const [sortBy, setSortBy] = useState('alphabet');
 
-	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
+  const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 
-	const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
-	}
+  const onRedirect = (route: string, params?: any) => {
+    navigation.navigate(route, params)
+  }
 
-	const onProductClick = (product: any) => {
-		setCurProduct(product)
-	}
+  const onProductClick = (product: any) => {
+    setCurProduct(product)
+  }
 
-	const handleCancel = () => {
-		handleChangeSearch('')
-	}
+  const handleCancel = () => {
+    handleChangeSearch('')
+  }
 
-	const handleCloseProductModal = () => {
-		setCurProduct(null)
-		updateProductModal && updateProductModal(null)
-	}
+  const handleCloseProductModal = () => {
+    setCurProduct(null)
+    updateProductModal && updateProductModal(null)
+  }
 
-	const handleCloseCartModal = () => {
-		setOpenCart(false);
-	}
+  const handleCloseCartModal = () => {
+    setOpenCart(false);
+  }
 
-	const handlerProductAction = () => {
-		handleCloseProductModal()
-	}
+  const handlerProductAction = () => {
+    handleCloseProductModal()
+  }
 
-	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
-		setOpenCart(false)
-	}
+  const handleUpsellingPage = () => {
+    onRedirect('CheckoutNavigator', {
+      screen: 'CheckoutPage',
+      cartUuid: currentCart?.uuid,
+      businessLogo: logo,
+      businessName: business?.name,
+      cartTotal: currentCart?.total
+    })
+    setOpenCart(false)
+  }
 
-	const handlePageScroll = useCallback(({ nativeEvent }: any) => {
-		const scrollOffset = nativeEvent.contentOffset.y
-		if (businessState?.business?.lazy_load_products_recommended) {
-			const height = nativeEvent.contentSize.height
-			const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
-			if (scrollOffset + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
-				getNextProducts()
-				showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
-			}
-		} else {
-			if (!scrollOffset || !categoriesLayout || !productListLayout || isCategoryClicked) return
-			
-			for (const key in categoriesLayout) {
-				const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
-				if (scrollOffset < 10) {
-					setSelectedCategoryId('cat_all');
-					return;
-				}
-				if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
-					if (selectedCategoryId !== key) {
-						setSelectedCategoryId(key)
-					}
-				}
-			}
-		}
-	}, [isCategoryClicked, selectedCategoryId])
+  const handlePageScroll = useCallback(({ nativeEvent }: any) => {
+    const scrollOffset = nativeEvent.contentOffset.y
+    if (businessState?.business?.lazy_load_products_recommended) {
+      const height = nativeEvent.contentSize.height
+      const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
+      if (scrollOffset + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
+        getNextProducts()
+        showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+      }
+    } else {
+      if (!scrollOffset || !categoriesLayout || !productListLayout || isCategoryClicked) return
 
-	const handleTouchDrag = useCallback(() => {
-		setCategoryClicked(false);
-	}, []);
+      for (const key in categoriesLayout) {
+        const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
+        if (scrollOffset < 10) {
+          setSelectedCategoryId('cat_all');
+          return;
+        }
+        if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
+          if (selectedCategoryId !== key) {
+            setSelectedCategoryId(key)
+          }
+        }
+      }
+    }
+  }, [isCategoryClicked, selectedCategoryId, productListLayout])
 
-	return (
-		<>
-			<Animated.View style={{ flex: 1, backgroundColor: theme.colors.white, position: 'absolute', width: '100%', top: top, zIndex: 1 }}>
-				{!loading && business?.id && (
-					<TopHeader>
-						<OButton
-							imgLeftSrc={theme.images.general.arrow_left}
-							imgRightSrc={null}
-							style={styles.btnBackArrow}
-							onClick={() => (navigation?.canGoBack() && navigation.goBack()) || (auth && navigation.navigate('BottomTab'))}
-							imgLeftStyle={{ tintColor: theme.colors.textPrimary }}
-						/>
-						{!errorQuantityProducts && (
-							<View style={{ ...styles.headerItem }}>
-								<View
-									style={styles.searchIcon}
-								>
-									<SocialShareFav 
-										icon={theme.images.general.share}
-										style={{width: 19, height: 19}}
-									/>
-								</View>
-							</View>
-						)}
-					</TopHeader>
-				)}
-			</Animated.View>
-			<BusinessProductsListingContainer
-				style={styles.mainContainer}
-				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
-				stickyHeaderIndices={[1]}
-				ref={scrollViewRef}
-				onScroll={handlePageScroll}
-				onScrollBeginDrag={handleTouchDrag}
-				scrollEventThrottle={16}
-			>
-				<WrapHeader>
-					<BusinessBasicInformation
-						businessState={businessState}
-						openBusinessInformation={openBusinessInformation}
-						header={header}
-						logo={logo}
-						noImage={true}
-					/>
-					<View style={{ display: 'flex', position: 'relative', flexDirection: 'row', minHeight: 42, paddingHorizontal: 40, marginTop: 12 }}>
-						<WrapSearchBar>
-							<SearchBar
-								onSearch={handleChangeSearch}
-								isCancelXButtonShow
-								noBorderShow
-								placeholder={t('SEARCH', 'Search')}
-								lazyLoad={businessState?.business?.lazy_load_products_recommended}
-								inputWrapStyle={{ height: 40, backgroundColor: theme.colors.clear, borderWidth: 0, paddingStart: 11, marginEnd: 0 }}
-							/>
-						</WrapSearchBar>
-						<SortWrap>
-							<SortButton onPress={() => setSortBy('rank')} style={{ marginEnd: 7 }}>
-								<OText size={12} weight={Platform.OS == 'ios' ? '600' : 'bold'} color={theme.colors.textPrimary}>{t('RANK', 'Rank')}</OText>
-							</SortButton>
-							<SortButton onPress={() => setSortBy('alphabet')}>
-								<OText size={12} weight={Platform.OS == 'ios' ? '600' : 'bold'} color={theme.colors.textPrimary}>{t('A_TO_Z', 'A to Z')}</OText>
-							</SortButton>
-						</SortWrap>
-					</View>
-				</WrapHeader>
-				{!loading && business?.id && !(business?.categories?.length === 0) && (
-					<CategoryWrap>
-						<BusinessProductsCategories
-							categories={[{ id: 'all', 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}
-							contentStyle={{ paddingHorizontal: 40 }}
-							productListLayout={productListLayout}
-							categoriesLayout={categoriesLayout}
-							selectedCategoryId={selectedCategoryId}
-							setSelectedCategoryId={setSelectedCategoryId}
-							setCategoryClicked={setCategoryClicked}
-							lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-						/>
-					</CategoryWrap>
-				)}
-				<View>
-					{!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}
-								sortBy={sortBy}
-								categoriesLayout={categoriesLayout}
-								setCategoriesLayout={setCategoriesLayout}
-							/>
-						</WrapContent>
-					)}
-					{loading && !error && (
-						<>
-							<BusinessProductsCategories
-								categories={[]}
-								categorySelected={categorySelected}
-								onClickCategory={handleChangeCategory}
-								featured={featuredProducts}
-								openBusinessInformation={openBusinessInformation}
-								loading={loading}
-							/>
-							<WrapContent>
-								<BusinessProductsList
-									categories={[]}
-									category={categorySelected}
-									categoryState={categoryState}
-									isBusinessLoading={loading}
-									errorQuantityProducts={errorQuantityProducts}
-								/>
-							</WrapContent>
-						</>
-					)}
-				</View>
-			</BusinessProductsListingContainer>
-			{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && !openCart && curProduct === null && (
-				<FloatingButton
-					btnText={
-						currentCart?.subtotal >= currentCart?.minimum
-							? !openUpselling ? t('VIEW_CART', 'View Cart') : t('LOADING', 'Loading')
-							: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
-					}
-					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
-					// btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
-					// btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
-					btnLeftValue={currentCart?.products?.length}
-					btnRightValue={parsePrice(currentCart?.total)}
-					disabled={openUpselling || currentCart?.subtotal < currentCart?.minimum}
-					handleClick={() => setOpenCart(true)}
-				/>
-			)}
-			<OModal
-				open={!!curProduct || (!!productModal.product && !orderState.loading)}
-				onClose={handleCloseProductModal}
-				entireModal
-				customClose
-			>
-				<ProductForm
-					product={curProduct || productModal.product}
-					businessSlug={business?.slug}
-					businessId={business?.id || productModal?.product?.category?.business_id}
-					onClose={handleCloseProductModal}
-					navigation={navigation}
-					onSave={handlerProductAction}
-					setProductLogin={setProductLogin}
-				/>
-			</OModal>
-			<OModal
-				open={openCart}
-				onClose={handleCloseCartModal}
-				entireModal
-				customClose
-			>
-				<ScrollView stickyHeaderIndices={[0]} style={{backgroundColor: 'white'}} contentContainerStyle={{ paddingBottom: 100 }}>
-					<NavBar title={t('CART', 'Cart')} onActionLeft={handleCloseCartModal} leftImg={theme.images.general.close} noBorder btnStyle={{paddingLeft: 0}} />
-					<OrderSummary
-						cart={currentCart}
-						isCartPending={currentCart?.status === 2}
-						hasUpSelling={true}
-						isFromCheckout
-						title={t('ITEMS', 'Items')}
-						paddingH={40}
-					/>
-				</ScrollView>
-				<FloatingButton btnText={t('CHECKOUT', 'Checkout')} handleClick={() => handleUpsellingPage()} />
-			</OModal>
-		</>
-	)
+  const handleTouchDrag = useCallback(() => {
+    setCategoryClicked(false);
+  }, []);
+
+  return (
+    <>
+      <Animated.View style={{ flex: 1, backgroundColor: theme.colors.white, position: 'absolute', width: '100%', top: top, zIndex: 1 }}>
+        {!loading && business?.id && (
+          <TopHeader>
+            <OButton
+              imgLeftSrc={theme.images.general.arrow_left}
+              imgRightSrc={null}
+              style={styles.btnBackArrow}
+              onClick={() => (navigation?.canGoBack() && navigation.goBack()) || (auth && navigation.navigate('BottomTab'))}
+              imgLeftStyle={{ tintColor: theme.colors.textPrimary }}
+            />
+            {!errorQuantityProducts && (
+              <View style={{ ...styles.headerItem }}>
+                <View
+                  style={styles.searchIcon}
+                >
+                  <SocialShareFav
+                    icon={theme.images.general.share}
+                    style={{ width: 19, height: 19 }}
+                  />
+                </View>
+              </View>
+            )}
+          </TopHeader>
+        )}
+      </Animated.View>
+      <BusinessProductsListingContainer
+        style={styles.mainContainer}
+        isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
+        stickyHeaderIndices={[1]}
+        ref={scrollViewRef}
+        onScroll={handlePageScroll}
+        onScrollBeginDrag={handleTouchDrag}
+        scrollEventThrottle={16}
+      >
+        <WrapHeader>
+          <BusinessBasicInformation
+            businessState={businessState}
+            openBusinessInformation={openBusinessInformation}
+            header={header}
+            logo={logo}
+            noImage={true}
+          />
+          <View style={{ display: 'flex', position: 'relative', flexDirection: 'row', minHeight: 42, paddingHorizontal: 40, marginTop: 12 }}>
+            <WrapSearchBar>
+              <SearchBar
+                onSearch={handleChangeSearch}
+                isCancelXButtonShow
+                noBorderShow
+                placeholder={t('SEARCH', 'Search')}
+                lazyLoad={businessState?.business?.lazy_load_products_recommended}
+                inputWrapStyle={{ height: 40, backgroundColor: theme.colors.clear, borderWidth: 0, paddingStart: 11, marginEnd: 0 }}
+              />
+            </WrapSearchBar>
+            <SortWrap>
+              <SortButton onPress={() => setSortBy('rank')} style={{ marginEnd: 7 }}>
+                <OText size={12} weight={Platform.OS == 'ios' ? '600' : 'bold'} color={theme.colors.textPrimary}>{t('RANK', 'Rank')}</OText>
+              </SortButton>
+              <SortButton onPress={() => setSortBy('alphabet')}>
+                <OText size={12} weight={Platform.OS == 'ios' ? '600' : 'bold'} color={theme.colors.textPrimary}>{t('A_TO_Z', 'A to Z')}</OText>
+              </SortButton>
+            </SortWrap>
+          </View>
+        </WrapHeader>
+        {!loading && business?.id && !(business?.categories?.length === 0) && (
+          <CategoryWrap>
+            <BusinessProductsCategories
+              categories={[{ id: 'all', 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}
+              contentStyle={{ paddingHorizontal: 40 }}
+              productListLayout={productListLayout}
+              categoriesLayout={categoriesLayout}
+              selectedCategoryId={selectedCategoryId}
+              setSelectedCategoryId={setSelectedCategoryId}
+              setCategoryClicked={setCategoryClicked}
+              lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+            />
+          </CategoryWrap>
+        )}
+        <View>
+          {!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}
+                sortBy={sortBy}
+                categoriesLayout={categoriesLayout}
+                setCategoriesLayout={setCategoriesLayout}
+              />
+            </WrapContent>
+          )}
+          {loading && !error && (
+            <>
+              <BusinessProductsCategories
+                categories={[]}
+                categorySelected={categorySelected}
+                onClickCategory={handleChangeCategory}
+                featured={featuredProducts}
+                openBusinessInformation={openBusinessInformation}
+                loading={loading}
+              />
+              <WrapContent>
+                <BusinessProductsList
+                  categories={[]}
+                  category={categorySelected}
+                  categoryState={categoryState}
+                  isBusinessLoading={loading}
+                  errorQuantityProducts={errorQuantityProducts}
+                />
+              </WrapContent>
+            </>
+          )}
+        </View>
+      </BusinessProductsListingContainer>
+      {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && !openCart && curProduct === null && (
+        <FloatingButton
+          btnText={
+            currentCart?.subtotal >= currentCart?.minimum
+              ? !openUpselling ? t('VIEW_CART', 'View Cart') : t('LOADING', 'Loading')
+              : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+          }
+          isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
+          // btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
+          // btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
+          btnLeftValue={currentCart?.products?.length}
+          btnRightValue={parsePrice(currentCart?.total)}
+          disabled={openUpselling || currentCart?.subtotal < currentCart?.minimum}
+          handleClick={() => setOpenCart(true)}
+        />
+      )}
+      <OModal
+        open={!!curProduct || (!!productModal.product && !orderState.loading)}
+        onClose={handleCloseProductModal}
+        entireModal
+        customClose
+      >
+        <ProductForm
+          product={curProduct || productModal.product}
+          businessSlug={business?.slug}
+          businessId={business?.id || productModal?.product?.category?.business_id}
+          onClose={handleCloseProductModal}
+          navigation={navigation}
+          onSave={handlerProductAction}
+          setProductLogin={setProductLogin}
+        />
+      </OModal>
+      <OModal
+        open={openCart}
+        onClose={handleCloseCartModal}
+        entireModal
+        customClose
+      >
+        <ScrollView stickyHeaderIndices={[0]} style={{ backgroundColor: 'white' }} contentContainerStyle={{ paddingBottom: 100 }}>
+          <NavBar title={t('CART', 'Cart')} onActionLeft={handleCloseCartModal} leftImg={theme.images.general.close} noBorder btnStyle={{ paddingLeft: 0 }} />
+          <OrderSummary
+            cart={currentCart}
+            isCartPending={currentCart?.status === 2}
+            hasUpSelling={true}
+            isFromCheckout
+            title={t('ITEMS', 'Items')}
+            paddingH={40}
+          />
+        </ScrollView>
+        <FloatingButton btnText={t('CHECKOUT', 'Checkout')} handleClick={() => handleUpsellingPage()} />
+      </OModal>
+    </>
+  )
 }
 
 export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
-	const businessProductslistingProps = {
-		...props,
-		UIComponent: BusinessProductsListingUI
-	}
-	return (
-		<BusinessAndProductList {...businessProductslistingProps} />
-	)
+  const businessProductslistingProps = {
+    ...props,
+    UIComponent: BusinessProductsListingUI
+  }
+  return (
+    <BusinessAndProductList {...businessProductslistingProps} />
+  )
 }

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import Geolocation from '@react-native-community/geolocation'
 import {
 	View,
 	StyleSheet,
@@ -16,6 +17,7 @@ import {
 	useUtils,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
 	Search,
@@ -25,7 +27,8 @@ import {
 	HeaderWrapper,
 	ListWrapper,
 	FeaturedWrapper,
-	OrderProgressWrapper
+	OrderProgressWrapper,
+	FarAwayMessage
 } from './styles';
 
 import { SearchBar } from '../SearchBar';
@@ -38,7 +41,7 @@ import { OrderTypeSelector } from '../OrderTypeSelector';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
-import { getTypesText } from '../../utils';
+import { getTypesText, convertToRadian } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
 import { useIsFocused } from '@react-navigation/native';
 
@@ -85,6 +88,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 		searchInput: {
 			fontSize: 12,
+		},
+		iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
 		}
 	});
 
@@ -98,6 +110,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const { top } = useSafeAreaInsets();
 
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
+	const [isFarAway, setIsFarAway] = useState(false)
 
 	// const timerId = useRef<any>(false)
 	// const panResponder = useRef(
@@ -127,6 +140,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	};
 
+	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
+    const R = 6371 // km
+    const dLat = convertToRadian(lat2 - lat1)
+    const dLon = convertToRadian(lon2 - lon1)
+    const curLat1 = convertToRadian(lat1)
+    const curLat2 = convertToRadian(lat2)
+    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+    return R * c
+  }
+
 	useEffect(() => {
 		if (businessesList.businesses.length > 0) {
 			const fb = businessesList.businesses.filter((b) => b.featured == true);
@@ -148,6 +172,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	//   resetInactivityTimeout()
 	// }, [])
 
+	useEffect(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
 			<HeaderWrapper
@@ -180,6 +217,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						</OText>
 					</AddressInput>
 				</Search>
+				{isFarAway && (
+					<FarAwayMessage style={styles.farAwayMsg}>
+						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+					</FarAwayMessage>
+				)}
 				<OrderControlContainer>
 					<View style={styles.wrapperOrderOptions}>
 						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>

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

@@ -73,4 +73,13 @@ export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
 	padding-horizontal: 40px;
-`
+`
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-bottom: 25px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+`

package/themes/original/src/utils/index.tsx

@@ -168,4 +168,13 @@ export const transformCountryCode = (countryCode : number) => {
 export const getTypesText = (value: number) => {
   const ret = ORDER_TYPES.find((type: any) => type.value == value);
   return ret?.content;
+}
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ export const convertToRadian = (value: number) => {
+  return value * Math.PI / 180
 }

package/themes/single-business/src/components/DriverTips/index.tsx

@@ -41,10 +41,11 @@ const DriverTipsUI = (props: any) => {
 			borderRadius: 30
 		},
 		inputStyle: {
+			borderColor: theme.colors.border,
+			borderRadius: 8,
+			marginRight: 20,
+			height: 44,
 			flex: 1,
-			borderWidth: 1,
-			borderColor: theme.colors.disabled,
-			marginRight: 10
 		}
 	})
 
@@ -117,21 +118,23 @@ const DriverTipsUI = (props: any) => {
 						<OInput
 							placeholder={placeholderCurrency}
 							style={style.inputStyle}
+              inputStyle={{ fontSize: 12 }}
 							onChange={handleChangeDriverTip}
 							autoCapitalize='none'
 							autoCorrect={false}
 						/>
 						<OButton
-							text={t('APPLY_TIP', 'Apply Tip')}
+							text={t('APPLY', 'Apply')}
 							bgColor={theme.colors.primary}
 							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white', fontSize: 20 }}
+							textStyle={{ color: 'white', fontSize: 12 }}
 							imgRightSrc={null}
 							isDisabled={!(value > 0 && value !== driverTip) || !value}
 							onClick={() => {
 								handlerChangeOption(value)
 								setvalue(0)
 							}}
+              style={{ borderRadius: 8, height: 44, shadowOpacity: 0 }}
 						/>
 					</DTWrapperInput>
 					{parseFloat(driverTip || 0) > 0 && (

package/themes/single-business/src/components/DriverTips/styles.tsx

@@ -60,5 +60,4 @@ export const DTWrapperInput = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-top: 20px;
 `

package/themes/single-business/src/components/OrderSummary/index.tsx

@@ -192,19 +192,19 @@ const OrderSummaryUI = (props: any) => {
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
-                    <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
+                    <OText size={12} style={{ marginBottom: 10 }}>{t('COMMENTS', 'Comments')}</OText>
                     <View style={{ flex: 1, width: '100%' }}>
                       <OInput
                         value={cart?.comment}
                         placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
                         onChange={(value: string) => handleChangeComment(value)}
                         style={{
+                          borderColor: theme.colors.border,
+                          borderRadius: 10,
+                          marginBottom: 20,
+                          height: 104,
+                          maxHeight: 104,
                           alignItems: 'flex-start',
-                          width: '100%',
-                          height: 100,
-                          borderColor: theme.colors.textSecondary,
-                          paddingRight: 50,
-                          marginTop: 10
                         }}
                         multiline
                         inputStyle={{ color: theme.colors.textPrimary, fontSize: 12 }}