ordering-ui-react-native 0.20.0 → 0.20.2-release

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

@@ -21,7 +21,7 @@ export const AppleLogin = (props: any) => {
   const [{ configs }] = useConfig();
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
@@ -53,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -66,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -79,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>

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

@@ -72,7 +72,7 @@ export const BusinessBasicInformation = (
 			alignItems: 'flex-start'
 		},
 		businessInfo: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			paddingTop: isChewLayout ? 0 : 56,
 		},
 		bullet: {
@@ -95,7 +95,7 @@ export const BusinessBasicInformation = (
 			width: '100%',
 			top: 0,
 			zIndex: 100,
-			left: 40
+			left: 20
 		},
 		socialIcon: {
 			borderRadius: 3,
@@ -217,7 +217,7 @@ export const BusinessBasicInformation = (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
 							{[...Array(5).keys()].map(i => (
-								<View style={styles.socialIcon} key={i}>
+								<View style={{ ...styles.socialIcon, borderWidth: 0 }} key={i}>
 									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
 								</View>
 							))}

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

@@ -11,7 +11,7 @@ export const BusinessHeader = styled.ImageBackground`
 `;
 export const BusinessLogo = styled.View`
   position: absolute;
-  start: 40px;
+  start: 20px;
   top: -36px;
   z-index: 50;
   box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};

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

@@ -76,7 +76,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden
 
 	const textSize = 12
-	const cardHeight = windowHeight * 0.3
+	const cardHeight = windowHeight * 0.34
 
 	const styles = StyleSheet.create({
 		container: {
@@ -256,7 +256,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo style={{ position: 'absolute', bottom: 85, left: 15 }}>
+						<BusinessInfo style={{ position: 'absolute', top: -26, left: 15 }}>
 							{!hideBusinessLogo && (
 								<BusinessLogo style={styles.businessLogo}>
 									<FastImage
@@ -270,11 +270,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</BusinessLogo>
 							)}
 						</BusinessInfo>
-						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, alignItems: 'flex-start' }}>
 							<OText
 								size={textSize + 2}
-								style={{ lineHeight: 18, marginBottom: 6 }}
-								weight={'500'}>
+								style={{ lineHeight: 18, marginBottom: 6, width: '90%' }}
+								weight={'500'}
+								numberOfLines={1}
+								ellipsizeMode='tail'
+							>
 								{business?.name}
 							</OText>
 							{(!hideBusinessFavorite || !hideBusinessReviews) && (
@@ -301,7 +304,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</ReviewAndFavorite>
 							)}
 						</View>
-						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={1}>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={2}>
 							{business?.address}
 						</OText>
 						<Metadata>

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

@@ -8,13 +8,14 @@ export const BusinessHero = styled.View`
 `
 
 export const BusinessContent = styled.View`
-    padding-horizontal: 18px;
-    padding-bottom: 10px;
-    border-bottom-left-radius: 7.6px;
-    border-bottom-right-radius: 7.6px;
-    border-width: 1px;
-    border-color: ${(props: any) => props.theme.colors.border};
-	 overflow: visible;
+  position: relative;
+  padding-horizontal: 18px;
+  padding-bottom: 10px;
+  border-bottom-left-radius: 7.6px;
+  border-bottom-right-radius: 7.6px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+	overflow: visible;
 `;
 
 export const BusinessInfo = styled.View`

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
 	useLanguage, useUtils, useConfig,
@@ -16,13 +16,16 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
 import { formatUrlVideo } from '../../utils'
 import { ScheduleAccordion } from '../ScheduleAccordion';
 import moment from 'moment';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
@@ -30,6 +33,11 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
 	const [{ configs }] = useConfig()
+	const [orientationState] = useDeviceOrientation();
+
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
 
 	const hideLocation = theme?.business_view?.components?.information?.components?.location?.hidden
 	const hideSchedule = theme?.business_view?.components?.information?.components?.schedule?.hidden
@@ -73,6 +81,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return iAry;
 	};
 
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
 	return (
 		<BusinessInformationContainer>
 			<WrapMainContent contentContainerStyle={{}}>
@@ -93,16 +105,36 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										readOnly
 										location={businessLocation.location}
 										markerTitle={businessState?.business?.name}
+										businessZones={businessState?.business?.zones}
 									/>
 								</WrapBusinessMap>
 							)}
 						</>
 					)}
 					{!hideAddress && (
-						<OText size={12} mBottom={20}>
+						<OText size={12} mBottom={10}>
 							{businessState?.business?.address}
 						</OText>
 					)}
+					{businessState?.business?.address_notes && (
+						<>
+							<OText
+								size={12}
+								mBottom={10}
+								numberOfLines={isReadMore ? 20 : 3}
+								onTextLayout={onTextLayout}
+							>
+								{businessState?.business?.address_notes}
+							</OText>
+							{lengthMore && (
+								<TouchableOpacity
+									onPress={() => setIsReadMore(!isReadMore)}
+								>
+									<OText size={12} mBottom={20} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+								</TouchableOpacity>
+							)}
+						</>
+					)}
 					<DivideView />
 					{!hideSchedule && (
 						<>

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

@@ -17,7 +17,7 @@ export const MediaWrapper = styled.ScrollView`
   height: 127px;
 `
 export const InnerContent = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 export const WrapScheduleBlock = styled.View`
   margin: 20px 0;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;

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

@@ -23,7 +23,10 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClickCheckout,
 		checkoutButtonDisabled,
 		isMultiCheckout,
-		isFromUpselling
+		isFromUpselling,
+		changeActiveState,
+		isActive,
+		isGiftCart
 	} = props
 
 	const [orderState] = useOrder();
@@ -38,14 +41,13 @@ export const BusinessItemAccordion = (props: any) => {
 	const isProducts = cart?.products?.length
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
-	const [isActive, setActiveState] = useState(!!singleBusiness)
 	const [viewedCart, setViewedCart] = useState<any>(null)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
 		if (cartsLength === 1) {
-			setActiveState(!isClosed)
+			changeActiveState && changeActiveState(!isClosed, cart?.uuid)
 		}
 	}, [orderState?.carts, isClosed])
 
@@ -68,14 +70,14 @@ export const BusinessItemAccordion = (props: any) => {
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
-				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
+				onPress={() => !isClosed ? changeActiveState && changeActiveState(!isClosed, cart?.uuid) : isClosed}
 				activeOpacity={1}
 			>
 				<BIInfo>
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
 						<View style={{ flexDirection: 'row' }}>
-							{props.onNavigationRedirect && !isClosed && (
+							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
 								<>
 									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
 										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
@@ -84,7 +86,9 @@ export const BusinessItemAccordion = (props: any) => {
 							)}
 							{!isCartPending && (
 								<>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									{!isGiftCart && (
+										<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									)}
 									<OAlert
 										title={t('DELETE_CART', 'Delete Cart')}
 										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
@@ -94,7 +98,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{isBusinessChangeEnabled && props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && !isGiftCart && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity

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

@@ -0,0 +1,317 @@
+import React, { useState } from 'react'
+import { useLanguage, useOrder } from 'ordering-components/native'
+import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { OButton, OModal, OText } from '../shared'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import {
+    ProductsList,
+    TagsContainer,
+    SortContainer,
+    BrandContainer,
+    BrandItem,
+    PriceFilterWrapper,
+    BContainer,
+    WrapperButtons
+} from './styles'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { MaxSectionItem } from './MaxSectionItem'
+
+export const BusinessSearchFooter = (props: any) => {
+    const {
+        businessesSearchList,
+        handleCloseFilters,
+        handleChangeFilters,
+        brandList,
+        filters,
+        handleChangeBrandFilter,
+        handleChangePriceRange,
+        businessTypes,
+        handleApplyFilters,
+        clearFilters,
+        handleChangeActiveBusinessType,
+        openFilters
+    } = props
+
+    const screenHeight = Dimensions.get('window').height;
+    const theme = useTheme()
+    const [orderState] = useOrder()
+
+    const [, t] = useLanguage()
+
+    const maxDeliveryFeeOptions = [15, 25, 35, 'default']
+    // const maxProductPriceOptions = [5, 10, 15, 'default']
+    const maxDistanceOptions = [1000, 2000, 5000, 'default']
+    const maxTimeOptions = [5, 15, 30, 'default']
+    const sortItems = [
+        { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'distance' },
+        { text: t('DELIVERY_TIME', 'Delivery time'), value: 'delivery_time' },
+        { 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: 20,
+            width: '100%'
+        },
+        businessTypesContainer: {
+            width: '100%',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+        },
+        priceContainer: {
+            width: '100%',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between'
+        },
+        categoryStyle: {
+            marginRight: 10,
+            marginTop: 10,
+            borderRadius: 50,
+            paddingHorizontal: 10,
+            paddingVertical: 4,
+            paddingLeft: 0,
+            paddingRight: 0,
+            height: 28,
+            borderWidth: 0
+        },
+        priceItem: {
+            marginRight: 10,
+            marginTop: 10,
+            borderRadius: 50,
+            paddingVertical: 4,
+            paddingLeft: 5,
+            paddingRight: 5,
+            height: 27,
+            borderWidth: 0
+        },
+        applyButton: {
+            paddingHorizontal: 10,
+            width: '100%',
+            marginTop: 20
+        }
+    });
+
+    return (
+        <>
+            <BContainer
+                style={{ paddingHorizontal: 20 }}
+            >
+                <ProductsList>
+                    {businessesSearchList?.loading && (
+                        <>
+                            {[...Array(3).keys()].map(
+                                (item, i) => (
+                                    <View key={`skeleton:${i}`} style={{ width: '100%', marginTop: 20 }}>
+                                        <Placeholder key={i} style={{ paddingHorizontal: 5 }} Animation={Fade}>
+                                            <View style={{ flexDirection: 'row' }}>
+                                                <PlaceholderLine
+                                                    width={24}
+                                                    height={70}
+                                                    style={{ marginRight: 10, marginBottom: 10 }}
+                                                />
+                                                <Placeholder style={{ paddingVertical: 10 }}>
+                                                    <PlaceholderLine width={20} style={{ marginBottom: 25 }} />
+                                                    <PlaceholderLine width={60} />
+                                                </Placeholder>
+                                            </View>
+                                        </Placeholder>
+                                        <Placeholder style={{ paddingHorizontal: 5, bottom: 10 }} Animation={Fade}>
+                                            <View style={{ flexDirection: 'row-reverse', overflow: 'hidden' }}>
+                                                <PlaceholderLine
+                                                    width={24}
+                                                    height={70}
+                                                    style={{ marginRight: 10, marginBottom: 5 }}
+                                                />
+                                                <Placeholder style={{ paddingVertical: 10 }}>
+                                                    <PlaceholderLine width={60} height={10} />
+                                                    <PlaceholderLine width={50} height={10} />
+                                                    <PlaceholderLine width={70} height={10} />
+                                                </Placeholder>
+                                            </View>
+                                        </Placeholder>
+                                    </View>
+                                ),
+                            )}
+                        </>
+                    )}
+                </ProductsList>
+            </BContainer>
+            <OModal
+                open={openFilters}
+                onCancel={() => handleCloseFilters()}
+                onClose={() => handleCloseFilters()}
+            >
+                <ScrollView style={styles.filterContainer}>
+                    <OText
+                        size={20}
+                        mBottom={15}
+                        style={{ marginTop: 10 }}
+                    >
+                        {t('FILTER', 'Filter')}
+                    </OText>
+                    <SortContainer>
+                        <OText weight='bold' mBottom={7} size={16}>
+                            {t('SORT', 'Sort')}
+                        </OText>
+                        {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
+                            <TouchableOpacity
+                                key={item?.value}
+                                onPress={() => handleChangeFilters('orderBy', item?.value)}
+                                style={{ marginBottom: 7 }}
+                            >
+                                <OText
+                                    weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
+                                    mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
+                                >
+                                    {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
+                                </OText>
+                            </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
+                            filters={filters}
+                            title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
+                            options={maxDeliveryFeeOptions}
+                            filter='max_delivery_price'
+                            handleChangeFilters={handleChangeFilters}
+                        />
+                    )}
+                    {[1, 2].includes(orderState?.options?.type) && (
+                        <MaxSectionItem
+                            filters={filters}
+                            title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
+                            options={maxTimeOptions}
+                            filter='max_eta'
+                            handleChangeFilters={handleChangeFilters}
+                        />
+                    )}
+                    <MaxSectionItem
+                        filters={filters}
+                        title={t('MAX_DISTANCE', 'Max distance')}
+                        options={maxDistanceOptions}
+                        filter='max_distance'
+                        handleChangeFilters={handleChangeFilters}
+                    />
+                    {businessTypes?.length > 0 && (
+                        <TagsContainer>
+                            <OText weight='bold' mBottom={7} size={16}>{t('BUSINESS_CATEGORIES', 'Business categories')}</OText>
+                            <View style={styles.businessTypesContainer}>
+                                {businessTypes.map((type: any, i: number) => type.enabled && (
+                                    <OButton
+                                        key={type?.id}
+                                        bgColor={(filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? theme.colors.primary : theme.colors.backgroundGray200}
+                                        onClick={() => handleChangeActiveBusinessType(type)}
+                                        text={`${t(`BUSINESS_TYPE_${type.name.replace(/\s/g, '_').toUpperCase()}`, type.name)} ${filters?.business_types?.includes(type?.id) ? 'X' : ''}`}
+                                        style={styles.categoryStyle}
+                                        textStyle={{ fontSize: 10, color: (filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? '#fff' : theme.colors.textNormal }}
+                                    />
+                                ))}
+                            </View>
+                        </TagsContainer>
+                    )}
+                </ScrollView>
+                <WrapperButtons>
+                    <View style={{ width: '50%' }}>
+                        <OButton
+                            text={t('APPLY', 'Apply')}
+                            parentStyle={styles.applyButton}
+                            textStyle={{ color: '#fff' }}
+                            onClick={() => handleApplyFilters()}
+                        />
+                    </View>
+                    <View style={{ width: '50%' }}>
+                        <OButton
+                            text={t('CLEAR_FILTERS', 'Clear')}
+                            bgColor={theme.colors.white}
+                            borderColor={theme.colors.primary}
+                            parentStyle={styles.applyButton}
+                            textStyle={{ color: theme.colors.primary }}
+                            onClick={() => clearFilters()}
+                        />
+                    </View>
+                </WrapperButtons>
+            </OModal>
+        </>
+    )
+}