ordering-ui-react-native 0.15.8 → 0.15.9-release

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
 import { OText } from '../shared'
 import { BusinessMenuListParams } from '../../types'
@@ -19,7 +19,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const {top} = useSafeAreaInsets()
+  const { top } = useSafeAreaInsets()
 
   const styles = StyleSheet.create({
     container: {
@@ -36,7 +36,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
       height: 44,
       width: '100%'
     }
-	})
+  })
 
   const dropDownIcon = () => {
     return (
@@ -48,12 +48,18 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
     )
   }
 
+  useEffect(() => {
+    if (!businessMenuList?.loading && businessMenuList?.menus?.length === 1){
+      setMenu(businessMenuList?.menus[0])
+    }
+  }, [businessMenuList?.menus])
+
   return (
     <>
       {businessMenuList.loading ? (
         <Placeholder Animation={Fade}>
           <View>
-            <PlaceholderLine height={44}/>
+            <PlaceholderLine height={44} />
           </View>
         </Placeholder>
       ) : (
@@ -67,6 +73,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 onSelect={(selectedItem, index) => {
                   setMenu(selectedItem)
                 }}
+                defaultValue={businessMenuList?.menus?.length === 1 && businessMenuList?.menus[0]}
                 buttonTextAfterSelection={(selectedItem, index) => {
                   return selectedItem.name
                 }}

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

@@ -51,7 +51,9 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
-  const {top} = useSafeAreaInsets()
+  const { top } = useSafeAreaInsets()
+  const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
+  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const styles = StyleSheet.create({
     container: {
       height: windowHeight,
@@ -300,60 +302,62 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </View>
         </BusinessInfoWrapper>
-        <PreorderTypeWrapper>
-          <OText
-            size={16}
-            style={{
-              fontWeight: '600',
-              lineHeight: 24,
-              marginBottom: 12
-            }}
-          >
-            {t('PREORDER_TYPE', 'Preorder type')}
-          </OText>
-          <SelectDropdown
-            defaultValueByIndex={selectedPreorderType}
-            data={preorderTypeList}
-            // disabled={orderState.loading}
-            onSelect={(selectedItem, index) => {
-              setSelectedPreorderType(index)
-            }}
-            buttonTextAfterSelection={(selectedItem, index) => {
-              return selectedItem.name
-            }}
-            rowTextForSelection={(item, index) => {
-              return item.name
-            }}
-            buttonStyle={styles.selectOption}
-            buttonTextStyle={{
-              color: theme.colors.disabled,
-              fontSize: 14,
-              textAlign: 'left',
-              marginHorizontal: 0
-            }}
-            dropdownStyle={{
-              borderRadius: 8,
-              borderColor: theme.colors.lightGray,
-              marginTop: Platform.OS === 'ios' ? 12 : -top
-            }}
-            rowStyle={{
-              borderBottomColor: theme.colors.backgroundGray100,
-              backgroundColor: theme.colors.backgroundGray100,
-              height: 40,
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-              paddingTop: 8,
-              paddingHorizontal: 14
-            }}
-            rowTextStyle={{
-              color: theme.colors.disabled,
-              fontSize: 14,
-              marginHorizontal: 0
-            }}
-            renderDropdownIcon={() => dropDownIcon()}
-            dropdownOverlayColor='transparent'
-          />
-        </PreorderTypeWrapper>
+        {isPreOrderSetting && (
+          <PreorderTypeWrapper>
+            <OText
+              size={16}
+              style={{
+                fontWeight: '600',
+                lineHeight: 24,
+                marginBottom: 12
+              }}
+            >
+              {t('PREORDER_TYPE', 'Preorder type')}
+            </OText>
+            <SelectDropdown
+              defaultValueByIndex={selectedPreorderType}
+              data={preorderTypeList}
+              // disabled={orderState.loading}
+              onSelect={(selectedItem, index) => {
+                setSelectedPreorderType(index)
+              }}
+              buttonTextAfterSelection={(selectedItem, index) => {
+                return selectedItem.name
+              }}
+              rowTextForSelection={(item, index) => {
+                return item.name
+              }}
+              buttonStyle={styles.selectOption}
+              buttonTextStyle={{
+                color: theme.colors.disabled,
+                fontSize: 14,
+                textAlign: 'left',
+                marginHorizontal: 0
+              }}
+              dropdownStyle={{
+                borderRadius: 8,
+                borderColor: theme.colors.lightGray,
+                marginTop: Platform.OS === 'ios' ? 12 : -top
+              }}
+              rowStyle={{
+                borderBottomColor: theme.colors.backgroundGray100,
+                backgroundColor: theme.colors.backgroundGray100,
+                height: 40,
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                paddingTop: 8,
+                paddingHorizontal: 14
+              }}
+              rowTextStyle={{
+                color: theme.colors.disabled,
+                fontSize: 14,
+                marginHorizontal: 0
+              }}
+              renderDropdownIcon={() => dropDownIcon()}
+              dropdownOverlayColor='transparent'
+            />
+          </PreorderTypeWrapper>
+        )}
         {selectedPreorderType === 1 && (
           <MenuWrapper>
             <OText
@@ -373,78 +377,94 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </MenuWrapper>
         )}
-        <OrderTimeWrapper>
+        {isPreOrderSetting && showOrderTime && (
+          <OrderTimeWrapper>
+            <OText
+              size={16}
+              style={{
+                fontWeight: '600',
+                lineHeight: 24
+              }}
+            >
+              {t('ORDER_TIME', 'Order time')}
+            </OText>
+            <View style={{ flex: 1 }}>
+              {selectDate && datesWhitelist[0]?.start !== null && (
+                <CalendarStrip
+                  scrollable
+                  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}
+                  disabledDateNameStyle={styles.disabledDateName}
+                  disabledDateNumberStyle={styles.disabledDateNumber}
+                  disabledDateOpacity={0.6}
+                  onDateSelected={(date) => onSelectDate(date)}
+                  leftSelector={<LeftSelector />}
+                  rightSelector={<RightSelector />}
+                />
+              )}
+            </View>
+            <TimeListWrapper nestedScrollEnabled={true}>
+              {(isEnabled && timeList?.length > 0) ? (
+                <TimeContentWrapper>
+                  {timeList.map((time: any, i: number) => (
+                    <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
+                      <TimeItem active={timeSelected === time.value}>
+                        <OText
+                          size={14}
+                          color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
+                          style={{
+                            lineHeight: 24
+                          }}
+                        >{time.text}</OText>
+                      </TimeItem>
+                    </TouchableOpacity>
+                  ))}
+                  {timeList.length % 3 === 2 && (
+                    <TimeItem style={{ backgroundColor: 'transparent' }} />
+                  )}
+                </TimeContentWrapper>
+              ) : (
+                <OText
+                  size={16}
+                  style={{
+                    fontWeight: '600',
+                    lineHeight: 24,
+                    marginBottom: 12,
+                    textAlign: 'center'
+                  }}
+                >
+                  {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
+                </OText>
+              )}
+            </TimeListWrapper>
+          </OrderTimeWrapper>
+        )}
+        {!isPreOrderSetting && (
           <OText
             size={16}
             style={{
               fontWeight: '600',
-              lineHeight: 24
+              lineHeight: 24,
+              marginTop: 30,
+              marginBottom: 12,
+              textAlign: 'center'
             }}
-          >
-            {t('ORDER_TIME', 'Order time')}
+            >
+            {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
           </OText>
-          <View style={{ flex: 1 }}>
-            {selectDate && datesWhitelist[0]?.start !== null && (
-              <CalendarStrip
-                scrollable
-                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}
-                disabledDateNameStyle={styles.disabledDateName}
-                disabledDateNumberStyle={styles.disabledDateNumber}
-                disabledDateOpacity={0.6}
-                onDateSelected={(date) => onSelectDate(date)}
-                leftSelector={<LeftSelector />}
-                rightSelector={<RightSelector />}
-              />
-            )}
-          </View>
-          <TimeListWrapper nestedScrollEnabled={true}>
-            {(isEnabled && timeList?.length > 0) ? (
-              <TimeContentWrapper>
-                {timeList.map((time: any, i: number) => (
-                  <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
-                    <TimeItem active={timeSelected === time.value}>
-                      <OText
-                        size={14}
-                        color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
-                        style={{
-                          lineHeight: 24
-                        }}
-                      >{time.text}</OText>
-                    </TimeItem>
-                  </TouchableOpacity>
-                ))}
-                {timeList.length % 3 === 2 && (
-                  <TimeItem style={{ backgroundColor: 'transparent' }} />
-                )}
-              </TimeContentWrapper>
-            ) : (
-              <OText
-                size={16}
-                style={{
-                  fontWeight: '600',
-                  lineHeight: 24,
-                  marginBottom: 12,
-                  textAlign: 'center'
-                }}
-              >
-                {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
-              </OText>
-            )}
-          </TimeListWrapper>
-        </OrderTimeWrapper>
+        )}
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
           textStyle={{ color: 'white' }}

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

@@ -44,11 +44,11 @@ const BusinessProductsCategoriesUI = (props: any) => {
 			borderTopStartRadius: 4,
 			borderTopEndRadius: 4,
 			backgroundColor: theme.colors.textPrimary,
-		  },
-		  tabDeactived: {
+		},
+		tabDeactived: {
 			marginTop: 10,
 			height: 4
-		  }
+		}
 	});
 
 	const handleCategoryScroll = (category: any) => {
@@ -111,8 +111,10 @@ const BusinessProductsCategoriesUI = (props: any) => {
 				categories.length &&
 				categories.map((category: any) => (
 					<Tab
-						key={category.name}
-						onPress={() => handleCategoryScroll(category)}
+						key={category.id}
+						onPress={() => requestAnimationFrame(() => {
+							handleCategoryScroll(category)
+						})}
 						style={[
 							category.id === 'featured' && !featured && styles.featuredStyle,
 							{

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

@@ -4,11 +4,12 @@ import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
 import { OButton, OIcon, OModal, OText } from '../shared';
-import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
+import { ProductsContainer, ErrorMessage, WrapperNotFound, RibbonBox, SubCategoriesContainer, ContainerButton, HeaderWrapper } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
+import { shape } from '../../utils'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -27,7 +28,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleCancelSearch,
     categoriesLayout,
     setCategoriesLayout,
-    currentCart
+    currentCart,
+    setSubcategoriesSelected,
+    subcategoriesSelected,
+    onClickCategory,
+    lazyLoadProductsRecommended,
+    isFiltMode
   } = props;
 
   const [, t] = useLanguage();
@@ -43,20 +49,85 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     setCategoriesLayout(_categoriesLayout)
   }
 
-  return (
-    <ProductsContainer>
-      {category.id &&
-        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
-          <SingleProductCard
-            key={'prod_' + product.id}
-            isSoldOut={product.inventoried && !product.quantity}
-            product={product}
-            businessId={businessId}
-            onProductClick={() => onProductClick(product)}
-            productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+  const onClickSubcategory = (subCategory: any, parentCategory: any) => {
+    if (parentCategory && lazyLoadProductsRecommended) {
+      onClickCategory(parentCategory)
+    }
+    if (!subCategory) {
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => _subcategory?.parent_category_id !== parentCategory?.id))
+      return
+    }
+    const categoryFounded = subcategoriesSelected.find((_subcategory: any) => subCategory?.id === _subcategory?.id)
+    if (categoryFounded) {
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id))
+    } else {
+      setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
+    }
+  }
+
+  const SubcategoriesComponent = ({ category }: any) => {
+    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
+
+    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 (
+    <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
+      <HeaderWrapper>
+        {category?.subcategories?.length > 0 && (
+          <SubcategoriesComponent category={category} />
+        )}
+      </HeaderWrapper>
+      {category.id &&
+        categoryState.products
+          ?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
+          ?.sort((a: any, b: any) => a.rank - b.rank)
+          ?.map((product: any, i : number) => (
+            <SingleProductCard
+              key={'prod_' + product.id + `_${i}`}
+              isSoldOut={product.inventoried && !product.quantity}
+              product={product}
+              businessId={businessId}
+              onProductClick={() => onProductClick(product)}
+              productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+            />
+          ))
+      }
       {!category.id &&
         featured &&
         categoryState?.products?.find((product: any) => product.featured) && (
@@ -71,7 +142,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
-                      key={i}
+                      key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
                       businessId={businessId}
@@ -85,9 +156,14 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         )}
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
-        const products = !isUseParentCategory
+        const _products = !isUseParentCategory
           ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
           : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
+        const products = subcategoriesSelected?.length > 0
+          ? _products?.filter((product: any) =>
+            !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
+          : _products
 
         const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
 
@@ -110,10 +186,28 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   <OText size={16} weight="600">
                     {category.name}
                   </OText>
+                  {category?.ribbon?.enabled && (
+                    <RibbonBox
+                      bgColor={category?.ribbon?.color}
+                      isRoundRect={category?.ribbon?.shape === shape?.rectangleRound}
+                      isCapsule={category?.ribbon?.shape === shape?.capsuleShape}
+                    >
+                      <OText
+                        size={10}
+                        weight={'400'}
+                        color={theme.colors.white}
+                        numberOfLines={2}
+                        ellipsizeMode='tail'
+                        lineHeight={13}
+                      >
+                        {category?.ribbon?.text}
+                      </OText>
+                    </RibbonBox>
+                  )}
                 </View>
                 {!!category?.description && (
                   <View style={{ position: 'relative' }}>
-                    <OText size={12} weight={'500'} mBottom={5}>
+                    <OText size={12} weight={'500'} mBottom={10} color='#909BA9'>
                       {shortCategoryDescription}
                       {category?.description?.length > 80 && (
                         <OButton
@@ -133,6 +227,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     </OText>
                   </View>
                 )}
+                {category?.subcategories?.length > 0 && !isFiltMode && (
+                  <SubcategoriesComponent category={category} />
+                )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
@@ -176,6 +273,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !isBusinessLoading &&
         categoryState.products.length === 0 &&
         !errors &&
+        !isFiltMode &&
         !(
           (searchValue && errorQuantityProducts) ||
           (!searchValue && !errorQuantityProducts)
@@ -220,7 +318,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         title={openDescription?.name}
         onClose={() => setOpenDescription(null)}
       >
-        <View style={{ padding: 20 }}>
+        <ScrollView style={{ padding: 20 }}>
           {!!openDescription?.image && (
             <OIcon
               url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
@@ -229,15 +327,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               style={{ borderRadius: 7.6 }}
             />
           )}
-          <OText>{openDescription?.description}</OText>
-        </View>
+          <OText mBottom={40}>{openDescription?.description}</OText>
+        </ScrollView>
       </OModal>
     </ProductsContainer>
   );
 };
 
 const bpStyles = StyleSheet.create({
-  catWrap: { flexDirection: 'row', alignItems: 'center', height: 41, marginBottom: 19 },
+  catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
   catIcon: {
     borderRadius: 7.6,
     shadowColor: '#000000',
@@ -246,6 +344,15 @@ const bpStyles = StyleSheet.create({
     shadowRadius: 1,
     marginEnd: 13,
   },
+  categoryButtonStyle: {
+    borderWidth: 0,
+    marginLeft: 5,
+    marginRight: 5,
+    marginBottom: 10,
+    height: 35,
+    paddingLeft: 3,
+    paddingRight: 3,
+  }
 });
 
 export const BusinessProductsList = (props: BusinessProductsListParams) => {

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const ProductsContainer = styled.View`
 `
@@ -11,4 +11,34 @@ export const ErrorMessage = styled.View`
 
 export const WrapperNotFound = styled.View`
   height: 500px;
-`
+`
+
+export const RibbonBox = styled.View`
+  margin-left: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 2px 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;
+  `}
+`
+
+export const SubCategoriesContainer = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+`
+
+export const ContainerButton = styled.View`
+`
+
+export const HeaderWrapper = styled.View``