ordering-ui-react-native 0.22.54 → 0.22.55-release

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { useLanguage, useOrder } from 'ordering-components/native'
+import React from 'react'
+import { useLanguage, useOrder, useConfig } 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'
@@ -38,6 +38,7 @@ export const BusinessSearchFooter = (props: any) => {
     const [orderState] = useOrder()
 
     const [, t] = useLanguage()
+    const [{ configs }] = useConfig()
 
     const maxDeliveryFeeOptions = [15, 25, 35, 'default']
     // const maxProductPriceOptions = [5, 10, 15, 'default']
@@ -57,6 +58,8 @@ export const BusinessSearchFooter = (props: any) => {
         { level: '5', content: '$$$$$' }
     ]
 
+    const filterOptionsEnabled = configs?.filter_search_options?.value?.split('|') || []
+
     const styles = StyleSheet.create({
         container: {
             paddingHorizontal: 40,
@@ -165,90 +168,97 @@ export const BusinessSearchFooter = (props: any) => {
                     >
                         {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 }}
+                    {filterOptionsEnabled.includes('sort') && (
+                        <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>
+                    )}
+                    {filterOptionsEnabled.includes('brands') && (
+
+                        <BrandContainer>
+                            <OText
+                                size={16}
+                                weight='bold'
+                                lineHeight={24}
+                                style={{ marginBottom: 10 }}
                             >
-                                <OText
-                                    weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
-                                    mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
+                                {t('BRANDS', 'Brands')}
+                            </OText>
+                            {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
+                                <ScrollView
+                                    style={{ maxHeight: 300, marginBottom: 10 }}
+                                    showsVerticalScrollIndicator={true}
+                                    nestedScrollEnabled={true}
                                 >
-                                    {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>
+                    )}
+                    {filterOptionsEnabled.includes('price_range') && (
+                        <PriceFilterWrapper>
+                            <OText
+                                size={16}
+                                weight='bold'
+                                lineHeight={24}
+                                style={{ marginBottom: 5 }}
                             >
-                                {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
-                                    <BrandItem
+                                {t('PRICE_RANGE', 'Price range')}
+                            </OText>
+                            <View style={styles.priceContainer}>
+                                {priceList.map((price: any, i: number) => (
+                                    <OButton
                                         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>
+                                        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.white : theme.colors.textNormal }}
+                                    />
                                 ))}
-                            </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 && (
+                            </View>
+                        </PriceFilterWrapper>
+                    )}
+                    {orderState?.options?.type === 1 && filterOptionsEnabled.includes('max_delivery_fee') && (
                         <MaxSectionItem
                             filters={filters}
                             title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
@@ -257,7 +267,7 @@ export const BusinessSearchFooter = (props: any) => {
                             handleChangeFilters={handleChangeFilters}
                         />
                     )}
-                    {[1, 2].includes(orderState?.options?.type) && (
+                    {[1, 2].includes(orderState?.options?.type) && filterOptionsEnabled.includes('max_delivery_time') && (
                         <MaxSectionItem
                             filters={filters}
                             title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
@@ -266,14 +276,16 @@ export const BusinessSearchFooter = (props: any) => {
                             handleChangeFilters={handleChangeFilters}
                         />
                     )}
-                    <MaxSectionItem
-                        filters={filters}
-                        title={t('MAX_DISTANCE', 'Max distance')}
-                        options={maxDistanceOptions}
-                        filter='max_distance'
-                        handleChangeFilters={handleChangeFilters}
-                    />
-                    {businessTypes?.length > 0 && (
+                    {filterOptionsEnabled.includes('max_distance') && (
+                        <MaxSectionItem
+                            filters={filters}
+                            title={t('MAX_DISTANCE', 'Max distance')}
+                            options={maxDistanceOptions}
+                            filter='max_distance'
+                            handleChangeFilters={handleChangeFilters}
+                        />
+                    )}
+                    {businessTypes?.length > 0 && filterOptionsEnabled.includes('business_categories') && (
                         <TagsContainer>
                             <OText weight='bold' mBottom={7} size={16}>{t('BUSINESS_CATEGORIES', 'Business categories')}</OText>
                             <View style={styles.businessTypesContainer}>
@@ -284,7 +296,7 @@ export const BusinessSearchFooter = (props: any) => {
                                         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 }}
+                                        textStyle={{ fontSize: 10, color: (filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? theme.colors.white : theme.colors.textNormal }}
                                     />
                                 ))}
                             </View>
@@ -296,7 +308,6 @@ export const BusinessSearchFooter = (props: any) => {
                         <OButton
                             text={t('APPLY', 'Apply')}
                             parentStyle={styles.applyButton}
-                            textStyle={{ color: '#fff' }}
                             onClick={() => handleApplyFilters()}
                         />
                     </View>

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { useLanguage } from 'ordering-components/native'
+import React from 'react'
+import { useLanguage, useConfig } from 'ordering-components/native'
 import { View, Platform, StyleSheet, Dimensions } from 'react-native'
 import { HeaderTitle, OButton, OText } from '../shared'
 import { SearchBar } from '../SearchBar';
@@ -20,6 +20,8 @@ export const BusinessSearchHeader = (props: any) => {
     } = props
     const theme = useTheme()
     const [, t] = useLanguage()
+    const [{ configs }] = useConfig()
+
     const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
     const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
     const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
@@ -61,7 +63,9 @@ export const BusinessSearchHeader = (props: any) => {
                     />
                 )}
                 <HeaderTitle ph={20} text={t('SEARCH', 'Search')} />
-                <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: Platform.OS === 'ios' ? 35 : 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
+                {configs?.filter_search_options?.value !== '' && (
+                    <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: Platform.OS === 'ios' ? 35 : 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
+                )}
             </View>
             <BContainer
                 style={{ paddingHorizontal: 20 }}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState, useCallback } from 'react'
 import { useLanguage, BusinessSearchList, useOrder, useUtils, useEvent, showToast, ToastType } from 'ordering-components/native'
 import { ScrollView, StyleSheet, Dimensions, FlatList } from 'react-native'
 import { useTheme } from 'styled-components/native'
@@ -16,7 +16,6 @@ import {
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
 import { BusinessSearchParams } from '../../types'
-import { useIsFocused } from '@react-navigation/native';
 
 import { BusinessSearchHeader } from './BusinessSearchHeader'
 import { BusinessSearchFooter } from './BusinessSearchFooter'
@@ -49,8 +48,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
 
   const [openFilters, setOpenFilters] = useState(false)
 
-  const isFocused = useIsFocused();
-
   const styles = StyleSheet.create({
     productsContainer: {
       marginTop: 20
@@ -130,17 +127,16 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     })
   }
 
-  const handleScroll = ({ nativeEvent }: any) => {
+  const handleScroll = useCallback(({ nativeEvent }: any) => {
     const y = nativeEvent.contentOffset.y;
     const height = nativeEvent.contentSize.height;
     const hasMore = !(
       paginationProps.totalPages === paginationProps.currentPage
     );
-
-    if (y + PIXELS_TO_SCROLL > height && !businessesSearchList.loading && hasMore && businessesSearchList?.businesses?.length > 0) {
+    if (height > 1000 && y + PIXELS_TO_SCROLL > height && !businessesSearchList.loading && hasMore && businessesSearchList?.businesses?.length > 0) {
       handleSearchbusinessAndProducts();
     }
-  };
+  }, [businessesSearchList.loading, businessesSearchList?.businesses?.length]);
 
   const onChangeTermValue = (query: any) => {
     handleChangeTermValue(query)
@@ -159,15 +155,14 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleSearchbusinessAndProducts(true)
   }, [])
 
-
-  useEffect(() => {
-    handleChangeTermValue('')
-  }, [isFocused])
+  const businessFiltered = useMemo(() => {
+    return businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0)
+  }, [businessesSearchList.businesses])
 
   return (
     <>
       <FlatList
-        data={businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0)}
+        data={businessFiltered}
         ListFooterComponent={<BusinessSearchFooter
           businessesSearchList={businessesSearchList}
           handleCloseFilters={handleCloseFilters}

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

@@ -11,6 +11,8 @@ import { BusinessMenuList } from '../BusinessMenuList'
 import Spinner from 'react-native-loading-spinner-overlay'
 import { BusinessPreorderParams } from '../../types'
 import moment from 'moment'
+import { setLocalMoment } from '../../utils';
+
 import SelectDropdown from 'react-native-select-dropdown'
 import {
   PreOrderContainer,
@@ -41,7 +43,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     getActualSchedule,
     isAsap,
     cateringPreorder,
-    preorderLeadTime
+    preorderLeadTime,
+    preorderMaximumDays
   } = props
 
   const theme = useTheme()
@@ -261,14 +264,23 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     if (cateringPreorder) {
       let _timeLists = []
       const schedule = business && getActualSchedule()
-      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+      if (!schedule && business) {
+        setTimeList([])
         return
       }
+
       _timeLists = hoursList
-        .filter(hour => ((Object.keys(business || {})?.length === 0) || schedule?.lapses?.some((lapse: any) =>
-          moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
-          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
-          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+        .filter(hour => {
+          return (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some((lapse: any) => {
+            const openHour = lapse.open.hour < 10 ? `0${lapse.open.hour}` : lapse.open.hour
+            const openMinute = lapse.open.minute < 10 ? `0${lapse.open.minute}` : lapse.open.minute
+            const closeHour = lapse.close.hour < 10 ? `0${lapse.close.hour}` : lapse.close.hour
+            const closeMinute = lapse.close.minute < 10 ? `0${lapse.close.minute}` : lapse.close.minute
+            return moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${openHour}:${openMinute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${closeHour}:${closeMinute}`)
+          })) &&
+            (moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`)) &&
+            (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder)
+        })
         .map(hour => {
           return {
             value: hour.startTime,
@@ -296,7 +308,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       const _times = getTimes(selectDate, selectedMenu)
       setTimeList(_times)
     }
-  }, [selectDate, menu, business, cateringPreorder, hoursList, dateSelected])
+  }, [selectDate, menu, JSON.stringify(datesWhitelist), JSON.stringify(business), cateringPreorder, JSON.stringify(hoursList), dateSelected])
 
   useEffect(() => {
     if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -311,6 +323,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     }
   }, [dateSelected])
 
+  useEffect(() => {
+    setLocalMoment(moment, t)
+  }, [])
+
   useFocusEffect(
     React.useCallback(() => {
       handleAsap && handleAsap()
@@ -438,21 +454,23 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                   style={styles.calendar}
                   calendarHeaderContainerStyle={styles.calendarHeaderContainer}
                   calendarHeaderStyle={styles.calendarHeader}
-                  dateNumberStyle={styles.dateNumber}
-                  dateNameStyle={styles.dateName}
                   iconContainer={{ flex: 0.1 }}
-                  highlightDateNameStyle={styles.highlightDateName}
-                  highlightDateNumberStyle={styles.highlightDateNumber}
                   dayContainerStyle={{ height: '100%' }}
                   highlightDateContainerStyle={{ height: '100%' }}
                   calendarHeaderFormat='MMMM, YYYY'
                   iconStyle={{ borderWidth: 1 }}
                   selectedDate={selectDate}
                   datesWhitelist={datesWhitelist}
+                  highlightDateNameStyle={styles.highlightDateName}
+                  highlightDateNumberStyle={styles.highlightDateNumber}
+                  minDate={moment()}
+                  maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
                   disabledDateNameStyle={styles.disabledDateName}
                   disabledDateNumberStyle={styles.disabledDateNumber}
+                  dateNumberStyle={styles.dateNumber}
+                  dateNameStyle={styles.dateName}
                   disabledDateOpacity={0.6}
-                  onDateSelected={(date) => onSelectDate(date)}
+                  onDateSelected={(date: any) => onSelectDate(date)}
                   leftSelector={<LeftSelector />}
                   rightSelector={<RightSelector />}
                 />
@@ -559,9 +577,10 @@ export const BusinessPreorder = (props: any) => {
 
   const splitCateringValue = (configName: string) =>
     Object.values(props?.business?.configs || {})
-      ?.find(config => config?.key === configName)
+      ?.find((config : any) => config?.key === configName)
       ?.value?.split('|')
-      ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
+      ?.find((val : any) => val.includes(cateringTypeString || ''))?.split(',')[1]
+
   const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
   const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
   const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
@@ -580,4 +599,4 @@ export const BusinessPreorder = (props: any) => {
     cateringPreorder: !!cateringTypeString
   }
   return <MomentOption {...businessPreorderProps} />
-}
+}

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

@@ -1,87 +1,90 @@
 import React from 'react'
-import { useTheme } from 'styled-components/native'
 import { StyleSheet } from 'react-native'
-import { SubCategoriesContainer, ContainerButton } from './styles'
-import { OButton } from '../../shared'
 import { useLanguage } from 'ordering-components/native'
+import FIcon from 'react-native-vector-icons/Feather'
+import { SubCategoriesContainer, ContainerButton } from './styles'
+import { OButton, OText } from '../../shared'
 
 function SubcategoriesComponentPropsAreEqual(prev: any, next: any) {
-    return prev.subcategoriesSelected === next.subcategoriesSelected &&
-        prev.category === next.category
+  return prev.subcategoriesSelected === next.subcategoriesSelected &&
+    prev.category === next.category
 }
 
 interface SubcategoriesComponentParams {
-    subcategoriesSelected?: any,
-    category?: any,
-    onClickSubcategory: any
+  subcategoriesSelected?: any,
+  category?: any,
+  onClickSubcategory: any
 }
 
-const SubcategoriesComponent = (props : SubcategoriesComponentParams) => {
-    const {
-        subcategoriesSelected,
-        category,
-        onClickSubcategory
-    } = props
+const SubcategoriesComponent = (props: SubcategoriesComponentParams) => {
+  const {
+    subcategoriesSelected,
+    category,
+    onClickSubcategory
+  } = props
 
-    const theme = useTheme()
-    const [, t] = useLanguage()
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
+  const [, t] = useLanguage()
+  const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
 
-    const bpStyles = StyleSheet.create({
-        catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
-        catIcon: {
-            borderRadius: 7.6,
-            shadowColor: '#000000',
-            shadowOpacity: 0.1,
-            shadowOffset: { width: 0, height: 0 },
-            shadowRadius: 1,
-            marginEnd: 13,
-        },
-        categoryButtonStyle: {
-            borderWidth: 0,
-            marginLeft: 5,
-            marginRight: 5,
-            marginBottom: 10,
-            height: 35,
-            paddingLeft: 3,
-            paddingRight: 3,
-        }
-    });
+  const bpStyles = StyleSheet.create({
+    categoryButtonStyle: {
+      borderWidth: 0,
+      marginRight: 5,
+      borderRadius: 8,
+      marginBottom: 5,
+      height: 35,
+      padding: 0,
+      paddingLeft: 3,
+      paddingRight: 3,
+    }
+  });
 
 
-    return (
-        <SubCategoriesContainer>
-            <ContainerButton
-                isSelected={allsubcategorySelected}
-            >
-                <OButton
-                    onClick={() => onClickSubcategory(null, category)}
-                    bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-                    text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
-                    style={bpStyles.categoryButtonStyle}
-                    textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-                />
-            </ContainerButton>
-            {category?.subcategories?.map((subcategory: any) => {
-                const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
-                return (
-                    <ContainerButton
-                        key={subcategory?.id}
-                        isSelected={isSubcategorySelected}
-                    >
-                        <OButton
-                            onClick={() => onClickSubcategory(subcategory, category)}
-                            bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-                            text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
-                            style={bpStyles.categoryButtonStyle}
-                            textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-                        />
-                    </ContainerButton>
-                )
-            }
-            )}
-        </SubCategoriesContainer>
-    )
+  return (
+    <SubCategoriesContainer>
+      <ContainerButton
+        isSelected={allsubcategorySelected}
+      >
+        <OButton
+          onClick={() => onClickSubcategory(null, category)}
+          text={
+            allsubcategorySelected
+              ? <OText color='#FFF'>
+                  {t('ALL', 'All')}{' '}
+                  <FIcon name='x-circle' size={16} />
+                </OText>
+              : t('ALL', 'All')
+          }
+          style={bpStyles.categoryButtonStyle}
+          textStyle={{ fontSize: 12 }}
+        />
+      </ContainerButton>
+      {category?.subcategories?.map((subcategory: any) => {
+        const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
+        return (
+          <ContainerButton
+            key={subcategory?.id}
+            isSelected={isSubcategorySelected}
+          >
+            <OButton
+              onClick={() => onClickSubcategory(subcategory, category)}
+              text={
+                isSubcategorySelected
+                  ? <OText color='#FFF'>
+                      {subcategory?.name}{' '}
+                      <FIcon name='x-circle' size={16} />
+                    </OText>
+                  : subcategory?.name
+              }
+              style={bpStyles.categoryButtonStyle}
+              textStyle={{ fontSize: 12 }}
+            />
+          </ContainerButton>
+        )
+      }
+      )}
+    </SubCategoriesContainer>
+  )
 }
 
 export const SubcategoriesComponentMemoized = React.memo(SubcategoriesComponent, SubcategoriesComponentPropsAreEqual)