ordering-ui-react-native 0.22.5 → 0.22.6-release

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

@@ -23,8 +23,7 @@ export const AnalyticsSegment = (props: any) => {
     segmentClient.track('Product List Viewed', {
       business_id: category?.business_id,
       category_id: category?.id,
-      category: category?.name,
-      products: category?.products
+      category: category?.name
     })
   }
 
@@ -62,11 +61,12 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
-  const handleProductAdded = (product: any) => {
+  const handleProductAdded = (product: any, result: any) => {
     segmentClient.track('Product Added', {
-      id: product.id,
+      cart_id: result.uuid,
+      product_id: product.id,
       name: product.name,
-      category: product.category_id,
+      category: product.category_id || product?.categoryId,
       price: product.price,
       quantity: product.quantity
     })
@@ -101,7 +101,7 @@ export const AnalyticsSegment = (props: any) => {
 
   const handleOrderPlaced = (order: any) => {
     segmentClient.track('Order Placed', {
-      id: order.id,
+      order_id: order.id,
       affiliation: order.business?.name,
       revenue: order.total,
       tax: order.tax_total,

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

@@ -26,7 +26,6 @@ import {
 	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-const types = ['food', 'laundry', 'alcohol', 'groceries'];
 
 let BusinessInformation: null | React.ElementType = null
 let BusinessReviews: null | React.ElementType = null
@@ -36,6 +35,7 @@ export const BusinessBasicInformation = (
 ) => {
 	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
 	const { business, loading } = businessState;
+	const types = business?.types && business?.types?.filter(({ enabled }) => (enabled)).map(({ name }) => (name))
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
@@ -146,14 +146,11 @@ export const BusinessBasicInformation = (
 	}
 
 	const getBusinessType = () => {
-		if (Object.keys(business || {}).length <= 0) return t('GENERAL', 'General');
+		if (!types) return t('GENERAL', 'General');
 		const _types: any = [];
 		types.forEach(
-			(type) =>
-				business[type] &&
-				_types.push(
-					t(`BUSINESS_TYPE_${type?.replace(/\s/g, '_')?.toUpperCase()}`, type),
-				),
+			(type: any) =>
+				_types.push(type)
 		);
 		return _types.join(', ');
 	};
@@ -455,7 +452,7 @@ export const BusinessBasicInformation = (
 							</BusinessInfoItem>
 						</View>
 						<WrapReviews>
-							{!isBusinessInfoShow && (
+							{!isBusinessInfoShow && !loading && (
 								<>
 									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
 										<>

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

@@ -35,9 +35,9 @@ import FastImage from 'react-native-fast-image'
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation';
 
-function BusinessControllerPropsAreEqual (prevProps: any, nextProps: any) {
+function BusinessControllerPropsAreEqual(prevProps: any, nextProps: any) {
 	return JSON.stringify(prevProps.business) === JSON.stringify(nextProps.business) &&
-	prevProps.isBusinessOpen === nextProps.isBusinessOpen
+		prevProps.isBusinessOpen === nextProps.isBusinessOpen
 }
 
 export const BusinessControllerUI = React.memo((props: BusinessControllerParams) => {
@@ -232,7 +232,7 @@ export const BusinessControllerUI = React.memo((props: BusinessControllerParams)
 							</View>
 						)}
 						{!hideBusinessOffer && (
-							getBusinessOffer((business?.offers)) &&
+							!!getBusinessOffer((business?.offers)) &&
 							<OfferBox
 								isClosed={!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1')}
 								isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}
@@ -244,7 +244,7 @@ export const BusinessControllerUI = React.memo((props: BusinessControllerParams)
 									numberOfLines={2}
 									ellipsizeMode='tail'
 									lineHeight={13}
-								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
+								>{t('DISCOUNT', 'Discount')}{' '}{getBusinessOffer((business?.offers))}</OText>
 							</OfferBox>
 						)}
 						<BusinessState isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}>
@@ -309,7 +309,7 @@ export const BusinessControllerUI = React.memo((props: BusinessControllerParams)
 								</ReviewAndFavorite>
 							)}
 						</View>
-						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={2}>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3, fontFamily: undefined }} numberOfLines={1}>
 							{business?.address}
 						</OText>
 						<Metadata>

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, Vibration } from 'react-native';
 import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -57,6 +57,9 @@ export const BusinessItemAccordion = (props: any) => {
 		return acc = acc
 	}, cart?.subtotal)
 
+	const bgStyle = (subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary
+	const textStyles = (subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.black : theme.colors.white
+
 	useEffect(() => {
 		if (isActive && !isFromUpselling) {
 			if (cart?.uuid !== viewedCart?.uuid) {
@@ -66,6 +69,11 @@ export const BusinessItemAccordion = (props: any) => {
 		}
 	}, [isActive, viewedCart])
 
+	const handleGoToStore = () => {
+		Vibration.vibrate(100)
+		props.onNavigationRedirect('Business', { store: cart?.business?.slug })
+	}
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
@@ -79,7 +87,7 @@ export const BusinessItemAccordion = (props: any) => {
 						<View style={{ flexDirection: 'row' }}>
 							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
 								<>
-									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
+									<TouchableOpacity onPress={() => handleGoToStore()}>
 										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
 									</TouchableOpacity>
 								</>
@@ -153,11 +161,11 @@ export const BusinessItemAccordion = (props: any) => {
 					{cart?.valid_products && (
 						<OButton
 							onClick={handleClickCheckout}
-							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+							textStyle={{ color: textStyles, textAlign: 'center', flex: 1 }}
 							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
-							bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-							borderColor={theme.colors.primary}
+							bgColor={bgStyle}
+							borderColor={bgStyle}
 							isDisabled={checkoutButtonDisabled}
 						/>
 					)}

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

@@ -243,7 +243,7 @@ export const BusinessSearchFooter = (props: any) => {
                                     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 }}
+                                    textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.white : theme.colors.textNormal }}
                                 />
                             ))}
                         </View>
@@ -284,7 +284,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 +296,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

@@ -47,13 +47,11 @@ export const BusinessSearchHeader = (props: any) => {
                             borderWidth: 0,
                             width: 26,
                             height: 26,
-                            backgroundColor: '#FFF',
-                            borderColor: '#FFF',
-                            shadowColor: '#FFF',
                             paddingLeft: 0,
                             paddingRight: 0,
                             marginTop: 50,
                         }}
+                        useArrow
                         onClick={() => props.navigation.goBack()}
                         icon={AntDesignIcon}
                         iconProps={{

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

@@ -230,7 +230,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                 </BusinessInfoItem>
                 <OButton
                   onClick={() => onBusinessClick(business)}
-                  textStyle={{ color: theme.colors.primary, fontSize: 10 }}
+                  textStyle={{ fontSize: 10 }}
                   text={t('GO_TO_STORE', 'Go to store')}
                   style={{
                     borderRadius: 23,
@@ -238,7 +238,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                     paddingRight: 10,
                     height: 23,
                     shadowOpacity: 0,
-                    backgroundColor: theme.colors.primaryContrast,
                     borderWidth: 0
                   }}
                 />

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 />}
                 />
@@ -527,7 +545,6 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         )}
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
-          textStyle={{ color: 'white' }}
           style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
           onClick={() => handleClickBusiness()}
           isDisabled={isAsap || !(dateSelected && timeSelected)}
@@ -553,21 +570,22 @@ export const BusinessPreorder = (props: any) => {
   currentDate.setMinutes(59)
 
   const cateringTypeString = orderState?.options?.type === 7
-  ? 'catering_delivery'
-  : orderState?.options?.type === 8
-    ? 'catering_pickup'
-    : null
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
 
-const splitCateringValue = (configName : string) =>
-  Object.values(props?.business?.configs || {})
-    ?.find(config => config?.key === configName)
-    ?.value?.split('|')
-    ?.find(val => 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'))
-const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
-const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
+  const splitCateringValue = (configName: string) =>
+    Object.values(props?.business?.configs || {})
+      ?.find((config : any) => config?.key === configName)
+      ?.value?.split('|')
+      ?.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'))
+  const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
+  const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
 
   const businessPreorderProps = {
     ...props,
@@ -581,4 +599,4 @@ const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days')
     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)

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

@@ -65,11 +65,10 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       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])
-    }
+    setSubcategoriesSelected?.(categoryFounded
+      ? subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id)
+      : [...subcategoriesSelected, subCategory]
+    )
   }
 
   return (
@@ -214,11 +213,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           text={t('VIEW_MORE', 'View more')}
                           parentStyle={{ padding: 0 }}
                           onClick={() => setOpenDescription(category)}
-                          bgColor='transparent'
+                          bgColor={theme.colors.white}
+                          borderColor={theme.colors.primary}
                           textStyle={{
                             fontSize: 12,
                             borderBottomWidth: 1,
-                            borderBottomColor: theme.colors.primary,
                             color: theme.colors.primary
                           }}
                         />

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

@@ -18,15 +18,12 @@ export const RibbonBox = styled.View`
   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;
   `}