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

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

@@ -7,9 +7,9 @@ import {
 	useConfig
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,9 +20,12 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox,
+	ReviewAndFavorite
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
@@ -39,7 +42,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryPrice,
 		businessDeliveryTime,
 		businessPickupTime,
-		businessDistance
+		businessDistance,
+		handleFavoriteBusiness
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
@@ -119,8 +123,30 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
+  const handleChangeFavorite = () => {
+    handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+  }
+
 	return (
 		<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}
+					>
+						{business?.ribbon?.text}
+					</OText>
+				</RibbonBox>
+			)}
 			<BusinessHero>
 				<FastImage
 					style={{ height: 120 }}
@@ -160,14 +186,25 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							resizeMode={FastImage.resizeMode.cover}
 						/>
 					</BusinessLogo>
-					{(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>
-					)}
+					<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}

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

@@ -49,7 +49,34 @@ export const BusinessLogo = styled.View`
    
 `
 
+export const ReviewAndFavorite = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
 export const Reviews = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 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;
+  `}
+`

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

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,6 +20,7 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
@@ -97,6 +98,24 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
+			{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}
+					>
+						{business?.ribbon?.text}
+					</OText>
+				</RibbonBox>
+			)}
 			<BusinessHero>
 				<BusinessLogo>
 					<OIcon

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

@@ -4,6 +4,7 @@ export const Card = styled.TouchableOpacity`
   margin-vertical: 4px;
   height: 60px;
   overflow: hidden;
+  position: relative;
 `;
 
 export const BusinessHero = styled.View`
@@ -48,3 +49,25 @@ export const BusinessLogo = styled.View`
 export const Reviews = styled.View`
   flex-direction: row;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 0px;
+  right: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 160px;
+
+  ${(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;
+  `}
+`

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -21,17 +21,20 @@ export const BusinessItemAccordion = (props: any) => {
 		singleBusiness,
 		handleClearProducts,
 		handleClickCheckout,
-		checkoutButtonDisabled
+		checkoutButtonDisabled,
+		isMultiCheckout
 	} = props
 
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice }] = useUtils();
+	const [{ configs }] = useConfig()
 	const theme = useTheme();
 
 	const isCartPending = cart?.status === 2
 	const isClosed = !cart?.valid_schedule
 	const isProducts = cart?.products?.length
+	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const [isActive, setActiveState] = useState(!!singleBusiness)
 
@@ -44,7 +47,7 @@ export const BusinessItemAccordion = (props: any) => {
 	}, [orderState?.carts])
 
 	return (
-		<BIContainer isClosed={isClosed} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
+		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
 				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
@@ -90,7 +93,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity
@@ -139,7 +142,7 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && (
+			{!isActive && !isClosed && !!isProducts && !isMultiCheckout && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
 					{cart?.valid_products && (

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

@@ -7,7 +7,9 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-  min-height: 120px;
+  ${(props: any) => !props.isMultiCheckout && css`
+    min-height: 120px;
+  `}
   ${(props: any) => props.isClosed && css`
 	  opacity: 0.5;
     min-height: 60px;

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage, BusinessSearchList, useOrder, useUtils } from 'ordering-components/native'
-import { ScrollView, StyleSheet, TouchableOpacity, Platform, View } from 'react-native'
+import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
@@ -22,15 +22,20 @@ import {
   ProgressContentWrapper,
   ProgressBar,
   TagsContainer,
-  SortContainer
+  SortContainer,
+  BrandContainer,
+  BrandItem,
+  PriceFilterWrapper,
+  OptionTitle
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
+import { MyOrders } from '../MyOrders'
 
-export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
 
+export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   const {
     navigation,
     businessesSearchList,
@@ -42,9 +47,15 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     handleChangeFilters,
     filters,
     businessTypes,
-    setFilters
+    setFilters,
+    brandList,
+    onNavigationRedirect,
+    handleUpdateBusinessList,
+    handleUpdateProducts
   } = props
 
+  const screenHeight = Dimensions.get('window').height;
+  const screenWidth = Dimensions.get('window').width;
   const theme = useTheme()
   const [orderState] = useOrder()
   const { top } = useSafeAreaInsets();
@@ -63,11 +74,24 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
+  const priceList = [
+    { level: '1', content: '$' },
+    { level: '2', content: '$$' },
+    { level: '3', content: '$$$' },
+    { level: '4', content: '$$$$' },
+    { level: '5', content: '$$$$$' }
+  ]
+
   const styles = StyleSheet.create({
     container: {
       paddingHorizontal: 40,
       width: '100%'
     },
+    filterContainer: {
+      maxHeight: screenHeight - 150,
+      paddingHorizontal: 40,
+      width: '100%'
+    },
     searchInput: {
       fontSize: 10,
     },
@@ -84,6 +108,12 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
       flexWrap: 'wrap',
       justifyContent: 'center'
     },
+    priceContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between'
+    },
     categoryStyle: {
       marginRight: 10,
       marginTop: 10,
@@ -95,6 +125,16 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
       height: 28,
       borderWidth: 0
     },
+    priceItem: {
+      marginRight: 10,
+      marginTop: 10,
+      borderRadius: 50,
+      paddingVertical: 4,
+      paddingLeft: 5,
+      paddingRight: 5,
+      height: 27,
+      borderWidth: 0
+    },
     applyButton: {
       paddingHorizontal: 40,
       width: '100%',
@@ -107,7 +147,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
   }
 
   const handleCloseFilters = () => {
-    setFilters({ business_types: [], orderBy: 'default' })
+    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
     setOpenFilters(false)
   }
 
@@ -126,6 +166,18 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     }
   }
 
+  const handleChangeBrandFilter = (brandId: number) => {
+    let franchiseIds = [...filters?.franchise_ids]
+    if (filters?.franchise_ids?.includes(brandId)) franchiseIds = filters?.franchise_ids?.filter((item: any) => item !== brandId)
+    else franchiseIds.push(brandId)
+    handleChangeFilters && handleChangeFilters('franchise_ids', franchiseIds)
+  }
+
+  const handleChangePriceRange = (value: string) => {
+    if (value === filters?.price_level) handleChangeFilters('price_level', null)
+    else handleChangeFilters('price_level', value)
+  }
+
   const handleApplyFilters = () => {
     handleSearchbusinessAndProducts(true)
     setOpenFilters(false)
@@ -176,6 +228,60 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     )
   }
 
+  const BusinessControllerSkeletons = () => {
+    return (
+      <>
+        {[
+          ...Array(
+            paginationProps.nextPageItems
+              ? paginationProps.nextPageItems
+              : 3,
+          ).keys(),
+        ].map((item, i) => (
+          <Placeholder
+            Animation={Fade}
+            key={i}
+            style={{ width: 320, marginRight: 20, marginTop: 20 }}>
+            <View style={{ width: 320 }}>
+              <PlaceholderLine
+                height={155}
+                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>
+                <PlaceholderLine
+                  height={20}
+                  width={30}
+                  style={{ marginBottom: 10 }}
+                />
+                <PlaceholderLine
+                  height={20}
+                  width={80}
+                  style={{ marginBottom: 0 }}
+                />
+              </View>
+            </View>
+          </Placeholder>
+        ))}
+      </>
+    )
+  }
+
   return (
     <ScrollView style={styles.container}>
       <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
@@ -211,6 +317,20 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
           </View>
         )
       }
+      {businessesSearchList.businesses?.length > 0 && (
+        <MyOrders
+          hideOrders
+          businessesSearchList={businessesSearchList}
+          onNavigationRedirect={onNavigationRedirect}
+          BusinessControllerSkeletons={BusinessControllerSkeletons}
+        />
+      )}
+
+      <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
+        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
+          {t('BUSINESSES', 'Businesses')}
+        </OText>
+      </OptionTitle>
       <ScrollView horizontal>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
           <BusinessController
@@ -218,8 +338,9 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
             business={business}
             isBusinessOpen={business.open}
             handleCustomClick={() => onBusinessClick(business)}
+            handleUpdateBusinessList={handleUpdateBusinessList}
             orderType={orderState?.options?.type}
-            style={{ width: 320, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
+            style={{ width: screenWidth - 80, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
           />
         ))}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
@@ -234,55 +355,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
           </LoadMoreBusinessContainer>
         )}
         {businessesSearchList.loading && (
-          <>
-            {[
-              ...Array(
-                paginationProps.nextPageItems
-                  ? paginationProps.nextPageItems
-                  : 3,
-              ).keys(),
-            ].map((item, i) => (
-              <Placeholder
-                Animation={Fade}
-                key={i}
-                style={{ width: 320, marginRight: 20, marginTop: 20 }}>
-                <View style={{ width: 320 }}>
-                  <PlaceholderLine
-                    height={155}
-                    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>
-                    <PlaceholderLine
-                      height={20}
-                      width={30}
-                      style={{ marginBottom: 10 }}
-                    />
-                    <PlaceholderLine
-                      height={20}
-                      width={80}
-                      style={{ marginBottom: 0 }}
-                    />
-                  </View>
-                </View>
-              </Placeholder>
-            ))}
-          </>
+          <BusinessControllerSkeletons />
         )}
       </ScrollView>
       <ProductsList>
@@ -338,7 +411,8 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
                   businessId={business?.id}
                   onProductClick={() => { }}
                   productAddedToCartLength={0}
-                  style={{ width: 320, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
+                  handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
+                  style={{ width: screenWidth - 80, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
                 />
               )))}
 
@@ -388,7 +462,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
         onCancel={() => handleCloseFilters()}
         onClose={() => handleCloseFilters()}
       >
-        <ScrollView style={styles.container}>
+        <ScrollView style={styles.filterContainer}>
           <OText
             size={20}
             mBottom={15}
@@ -406,7 +480,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
                 onPress={() => handleChangeFilters('orderBy', item?.value)}
                 style={{ marginBottom: 7 }}
               >
-                <OText 
+                <OText
                   weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
                   mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
                 >
@@ -415,6 +489,70 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
               </TouchableOpacity>
             ))}
           </SortContainer>
+          <BrandContainer>
+            <OText
+              size={16}
+              weight='bold'
+              lineHeight={24}
+              style={{ marginBottom: 10 }}
+            >
+              {t('BRANDS', 'Brands')}
+            </OText>
+            {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
+              <ScrollView
+                style={{ maxHeight: 300, marginBottom: 10 }}
+                showsVerticalScrollIndicator={true}
+                nestedScrollEnabled={true}
+              >
+                {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
+                  <BrandItem
+                    key={i}
+                    onPress={() => handleChangeBrandFilter(brand?.id)}
+                  >
+                    <OText
+                      size={14}
+                      weight={'400'}
+                      lineHeight={24}
+                    >
+                      {brand?.name}
+                    </OText>
+                    {filters?.franchise_ids?.includes(brand?.id) && (
+                      <AntDesignIcon
+                        name='check'
+                        color={theme.colors.success500}
+                        size={16}
+                      />
+                    )}
+                  </BrandItem>
+                ))}
+              </ScrollView>
+            )}
+            {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
+              <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
+            )}
+          </BrandContainer>
+          <PriceFilterWrapper>
+            <OText
+              size={16}
+              weight='bold'
+              lineHeight={24}
+              style={{ marginBottom: 5 }}
+            >
+              {t('PRICE_RANGE', 'Price range')}
+            </OText>
+            <View style={styles.priceContainer}>
+              {priceList.map((price: any, i: number) => (
+                <OButton
+                  key={i}
+                  bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
+                  onClick={() => handleChangePriceRange(price?.level)}
+                  text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
+                  style={styles.priceItem}
+                  textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+                />
+              ))}
+            </View>
+          </PriceFilterWrapper>
           {orderState?.options?.type === 1 && (
             <MaxSectionItem
               title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const WrapHeader = styled.View`
   width: 100%;
@@ -68,9 +68,29 @@ export const ProgressContentWrapper = styled.View`
 `
 
 export const TagsContainer = styled.View`
-
+  padding-bottom: 10px;
 `
 
 export const SortContainer = styled.View`
   margin-bottom: 10px;
 `
+
+export const BrandContainer = styled.View``
+
+export const BrandItem = styled.TouchableOpacity`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  align-items: center;
+`
+
+export const PriceFilterWrapper = styled.View`
+  margin-bottom: 20px;
+`
+
+export const OptionTitle = styled.View`
+	margin-top: 24px;
+	${(props: any) => props.titleContent && css`
+		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
+	`}
+`