ordering-ui-react-native 0.16.49 → 0.16.50-release

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

@@ -1,33 +1,38 @@
 import React, { useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
 	useOrder,
 	useLanguage,
-	useConfig
+	useConfig,
+	useToast,
+	useSession,
+	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
+
 import {
-	Card,
 	BusinessHero,
 	BusinessContent,
-	BusinessCategory,
 	BusinessInfo,
 	Metadata,
 	BusinessState,
 	BusinessLogo,
 	Reviews,
 	RibbonBox,
-	ReviewAndFavorite
+	ReviewAndFavorite,
+	OfferBox
 } 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'
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation';
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const {
@@ -36,6 +41,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		navigation,
 		isBusinessOpen,
 		style,
+		isCustomLayout,
 		businessHeader,
 		businessFeatured,
 		businessLogo,
@@ -44,15 +50,32 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryTime,
 		businessPickupTime,
 		businessDistance,
-		handleFavoriteBusiness
+		handleFavoriteBusiness,
+		enableIntersection,
+		getBusinessOffer
 	} = props;
+
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
+	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
+	const [{ auth }] = useSession()
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
-	const [isIntersectionObserver, setIsIntersectionObserver] = useState(false)
+	const windowHeight = Dimensions.get('window').height
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+
+	const textSize = isCustomLayout ? 12 : 10
+	const cardHeight = windowHeight * 0.3
+
 	const styles = StyleSheet.create({
+		container: {
+			marginVertical: 20,
+			borderRadius: 7.6,
+			width: '100%',
+			position: 'relative',
+			height: cardHeight
+		},
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
 			borderTopRightRadius: 7.6,
@@ -102,7 +125,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 			flexDirection: 'row',
 			alignItems: 'center',
 			justifyContent: 'flex-start',
-		},
+		}
 	});
 
 	const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -121,43 +144,58 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const handleBusinessClick = (selectedBusiness: any) => {
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
-			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+			if (configState?.configs?.preorder_status_enabled?.value === '1') {
+				navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+				return
+			}
+			showToast(ToastType.Info, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'));
 		}
 	}
 
 	const handleChangeFavorite = () => {
-		handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+		if (auth) {
+			handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+		} else {
+			navigation && navigation.navigate('Login');
+		}
+	}
+
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
 	}
 
 	return (
-		<InView triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
-			<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}
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
+			{isIntersectionObserver ? (
+				<CardAnimation
+					style={[style, styles.container]}
+					onClick={() => handleBusinessClick(business)}
+				>
+					{business?.ribbon?.enabled && (
+						<RibbonBox
+							bgColor={business?.ribbon?.color}
+							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 						>
-							{business?.ribbon?.text}
-						</OText>
-					</RibbonBox>
-				)}
-				{isIntersectionObserver && (
+							<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 }}
-							source={{
+							style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
+							source={(businessHeader || business?.header) ? {
 								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
-							}}
+							} : theme.images.dummies.businessHeader}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
 						{(businessFeatured ?? business?.featured) && (
@@ -165,6 +203,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
+						{(!isCustomLayout) && (
+							getBusinessOffer((business?.offers)) &&
+							<OfferBox>
+								<OText
+									size={10}
+									weight={'400'}
+									numberOfLines={2}
+									ellipsizeMode='tail'
+									lineHeight={13}
+								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
+							</OfferBox>
+						)}
 						<BusinessState>
 							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 								<View style={styles.businessStateView}>
@@ -178,78 +228,137 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							)}
 						</BusinessState>
 					</BusinessHero>
-				)}
-				<BusinessContent>
-					<BusinessInfo>
-						{isIntersectionObserver && (
+					<BusinessContent>
+						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
 							<BusinessLogo style={styles.businessLogo}>
 								<FastImage
 									style={{ width: 56, height: 56 }}
-									source={{
+									source={(businessLogo || business?.logo) ? {
 										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
 										priority: FastImage.priority.normal,
-									}}
+									} : theme.images.dummies.businessLogo}
 									resizeMode={FastImage.resizeMode.cover}
 								/>
 							</BusinessLogo>
-						)}
-						<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: '.' })}
+							{!isCustomLayout && (
+								<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>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
+									/>
+								</ReviewAndFavorite>
+							)}
+						</BusinessInfo>
+						<View style={isCustomLayout && { width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+							<OText
+								size={textSize + 2}
+								style={{ lineHeight: 18, marginBottom: 6 }}
+								weight={'500'}>
+								{business?.name}
+							</OText>
+							{isCustomLayout && (
+								<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>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
+									/>
+								</ReviewAndFavorite>
+							)}
+						</View>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={isCustomLayout ? 1 : 2}>
+							{business?.address}
+						</OText>
+						<Metadata>
+							{!isBusinessOpen ? (
+								<View style={styles.closed}>
+									<OText size={10} color={theme.colors.red}>
+										{t('CLOSED', 'Closed')}
 									</OText>
-								</Reviews>
+								</View>
+							) : (
+								<View style={styles.bullet}>
+									{orderState?.options?.type === 1 && (
+										<OText size={textSize} color={theme.colors.textSecondary}>
+											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+										</OText>
+									)}
+									<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+										orderState?.options?.type === 1
+											? (businessDeliveryTime ?? business?.delivery_time)
+											: (businessPickupTime ?? business?.pickup_time),
+									)} \u2022 `}</OText>
+									<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+								</View>
 							)}
-							<TouchableOpacity
-								onPress={handleChangeFavorite}
-							>
-								<IconAntDesign
-									name={business?.favorite ? 'heart' : 'hearto'}
-									color={theme.colors.danger5}
-									size={18}
+						</Metadata>
+					</BusinessContent>
+				</CardAnimation>
+			) : (
+				<Placeholder
+					Animation={Fade}
+					style={{ marginBottom: 20 }}>
+					<View style={{ width: '100%' }}>
+						<PlaceholderLine
+							height={200}
+							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 }}
 								/>
-							</TouchableOpacity>
-						</ReviewAndFavorite>
-					</BusinessInfo>
-					<OText
-						size={12}
-						style={{ lineHeight: 18, marginBottom: 6 }}
-						weight={'500'}>
-						{business?.name}
-					</OText>
-					<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
-						{business?.address}
-					</OText>
-					{/* <BusinessCategory>
-          <OText>{getBusinessType()}</OText>
-        </BusinessCategory> */}
-					<Metadata>
-						{!isBusinessOpen ? (
-							<View style={styles.closed}>
-								<OText size={10} color={theme.colors.red}>
-									{t('CLOSED', 'Closed')}
-								</OText>
-							</View>
-						) : (
-							<View style={styles.bullet}>
-								{orderState?.options?.type === 1 && (
-									<OText size={10} color={theme.colors.textSecondary}>
-										{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
-									</OText>
-								)}
-								<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-									orderState?.options?.type === 1
-										? (businessDeliveryTime ?? business?.delivery_time)
-										: (businessPickupTime ?? business?.pickup_time),
-								)} \u2022 `}</OText>
-								<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
 							</View>
-						)}
-					</Metadata>
-				</BusinessContent>
-			</Card>
+							<PlaceholderLine
+								height={20}
+								width={30}
+								style={{ marginBottom: 10 }}
+							/>
+							<PlaceholderLine
+								height={20}
+								width={80}
+								style={{ marginBottom: 10 }}
+							/>
+						</View>
+					</View>
+				</Placeholder>
+			)}
 		</InView>
 	);
 };

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

@@ -1,12 +1,5 @@
 import styled, { css } from 'styled-components/native';
 
-export const Card = styled.TouchableOpacity`
-  margin-vertical: 20px;
-  border-radius: 7.6px;
-  width: 100%;
-  position: relative;
-`
-
 export const BusinessHero = styled.View`
   position: relative;
   border-top-right-radius: 7.6px;
@@ -16,7 +9,7 @@ export const BusinessHero = styled.View`
 
 export const BusinessContent = styled.View`
     padding-horizontal: 18px;
-    padding-bottom: 18px;
+    padding-bottom: 10px;
     border-bottom-left-radius: 7.6px;
     border-bottom-right-radius: 7.6px;
     border-width: 1px;
@@ -46,7 +39,7 @@ export const BusinessState = styled.View`
 `
 
 export const BusinessLogo = styled.View`
-   
+
 `
 
 export const ReviewAndFavorite = styled.View`
@@ -80,3 +73,15 @@ export const RibbonBox = styled.View`
     border-radius: 50px;
   `}
 `
+
+export const OfferBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 20px;
+  right: 10px;
+  border-radius: 50px;
+  color: ${(props: any) => props.theme.colors.textThird};
+  background: ${(props: any) => props.theme.colors.inputBorderColor};
+  padding: 3px 8px;
+  max-width: 180px;
+`

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

@@ -16,26 +16,19 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } 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';
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
-	const daysOfWeek = [
-		t('SUNDAY_ABBREVIATION', 'Sun'),
-		t('MONDAY_ABBREVIATION', 'Mon'),
-		t('TUESDAY_ABBREVIATION', 'Tues'),
-		t('WEDNESDAY_ABBREVIATION', 'Wed'),
-		t('THURSDAY_ABBREVIATION', 'Thur'),
-		t('FRIDAY_ABBREVIATION', 'Fri'),
-		t('SATURDAY_ABBREVIATION', 'Sat'),
-	];
+
 	const scheduleFormatted = ({
 		hour,
 		minute,
@@ -112,25 +105,11 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 						<WrapScheduleBlock>
 							{businessSchedule.map((schedule: any, i: number) => (
 								<ScheduleBlock key={i}>
-									<OText
-										lineHeight={21}
-										mBottom={16}
-										size={14}
-										weight={Platform.OS === 'android' ? 'bold' : '600'}
-										style={{ flexBasis: '20%' }}>
-										{daysOfWeek[i].toUpperCase()}
-									</OText>
-									{schedule.enabled ? (
-										<OText mBottom={16}>
-											{scheduleFormatted(schedule.lapses[0].open) +
-												' - ' +
-												scheduleFormatted(schedule.lapses[0].close)}
-										</OText>
-									) : (
-										<OText color={theme.colors.red} mBottom={16}>
-											{t('CLOSED', 'Closed')}
-										</OText>
-									)}
+									<ScheduleAccordion
+										weekIndex={i}
+										scheduleFormatted={scheduleFormatted}
+										schedule={schedule}
+									/>
 								</ScheduleBlock>
 							))}
 						</WrapScheduleBlock>
@@ -152,10 +131,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 											style={{ width: 210, height: 127, borderRadius: 7.6 }}
 											javaScriptEnabled={true}
 											domStorageEnabled={true}
-											source={{ 
+											source={{
 												html: `
 													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
-												`, 
+												`,
 											}}
 											mediaPlaybackRequiresUserAction={true}
 										/>

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

@@ -41,10 +41,16 @@ export const BusinessItemAccordion = (props: any) => {
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
-		if ((cartsLength === 1) && !isClosed) {
-			setActiveState(true)
+		if (cartsLength === 1) {
+			setActiveState(!isClosed)
 		}
-	}, [orderState?.carts])
+	}, [orderState?.carts, isClosed])
+
+	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+		if (item?.type === 1)
+			return acc = acc + item?.summary?.tax
+		return acc = acc
+	}, cart?.subtotal)
 
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
@@ -102,7 +108,7 @@ export const BusinessItemAccordion = (props: any) => {
 										<OText
 											size={12}
 											lineHeight={18}
-											color={theme.colors.textSecondary}
+											color={theme.colors.primary}
 											style={{ textDecorationLine: 'underline' }}
 										>
 											{t('CHANGE_STORE', 'Change store')}
@@ -149,9 +155,9 @@ export const BusinessItemAccordion = (props: any) => {
 						<OButton
 							onClick={handleClickCheckout}
 							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-							style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
-							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+							bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
 							borderColor={theme.colors.primary}
 							isDisabled={checkoutButtonDisabled}
 						/>

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+export const BusinessControllerSkeletons = ({ paginationProps }: any) => {
+  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>
+      ))}
+    </>
+  )
+}

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

@@ -0,0 +1,59 @@
+import { useLanguage, useUtils } from 'ordering-components/native'
+import React from 'react'
+import { View, TouchableOpacity, StyleSheet } from 'react-native'
+import { OText } from '../../shared'
+
+import { ProgressContentWrapper, ProgressBar } from './styles'
+
+export const MaxSectionItem = (props: any) => {
+    const {
+        filters,
+        handleChangeFilters,
+        title,
+        options,
+        filter
+    } = props
+
+    const [, t] = useLanguage()
+    const [{ parsePrice }] = useUtils();
+
+    const styles = StyleSheet.create({
+        maxContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        }
+    });
+
+    const parseValue = (option: number) => {
+        return filter === 'max_distance'
+            ? `${option / 1000} ${t('KM', 'Km')}`
+            : filter === 'max_eta'
+                ? `${option} ${t('MIN', 'min')}`
+                : parsePrice(option)
+    }
+    return (
+        <View style={{ marginBottom: 20 }}>
+            <OText weight='bold' mBottom={10} size={16}>
+                {title}
+            </OText>
+            <ProgressContentWrapper>
+                <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
+            </ProgressContentWrapper>
+            <View style={styles.maxContainer}>
+                {options.map((option: any, i: number) => (
+                    <TouchableOpacity
+                        onPress={() => handleChangeFilters(filter, option)}
+                        key={option}
+                    >
+                        <OText
+                            size={12}
+                            weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
+                        >
+                            {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
+                        </OText>
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    )
+}