ordering-ui-react-native 0.16.99 → 0.17.0-release

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -22,7 +22,8 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClearProducts,
 		handleClickCheckout,
 		checkoutButtonDisabled,
-		isMultiCheckout
+		isMultiCheckout,
+		isFromUpselling
 	} = props
 
 	const [orderState] = useOrder();
@@ -30,6 +31,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const [{ parsePrice }] = useUtils();
 	const [{ configs }] = useConfig()
 	const theme = useTheme();
+	const [events] = useEvent()
 
 	const isCartPending = cart?.status === 2
 	const isClosed = !cart?.valid_schedule
@@ -37,6 +39,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const [isActive, setActiveState] = useState(!!singleBusiness)
+	const [viewedCart, setViewedCart] = useState<any>(null)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
@@ -46,6 +49,21 @@ export const BusinessItemAccordion = (props: any) => {
 		}
 	}, [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)
+
+	useEffect(() => {
+		if (isActive && !isFromUpselling) {
+			if (cart?.uuid !== viewedCart?.uuid) {
+				setViewedCart(cart)
+				events.emit('cart_viewed', cart)
+			}
+		}
+	}, [isActive, viewedCart])
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
@@ -56,23 +74,6 @@ export const BusinessItemAccordion = (props: any) => {
 				<BIInfo>
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
-						{/* {orderState?.options?.type === 1 ? (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
-              </View>
-            ) : (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
-              </View>
-            )} */}
 						<View style={{ flexDirection: 'row' }}>
 							{props.onNavigationRedirect && !isClosed && (
 								<>
@@ -81,7 +82,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</TouchableOpacity>
 								</>
 							)}
-							{!isCartPending && !isClosed && (
+							{!isCartPending && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<OAlert
@@ -102,7 +103,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 +150,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/index.tsx

@@ -52,7 +52,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     brandList,
     onNavigationRedirect,
     handleUpdateBusinessList,
-    handleUpdateProducts
+    handleUpdateProducts,
+    brandId
   } = props
 
   const screenHeight = Dimensions.get('window').height;
@@ -75,6 +76,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+
   const priceList = [
     { level: '1', content: '$' },
     { level: '2', content: '$$' },
@@ -96,7 +99,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       width: '100%'
     },
     searchInput: {
-      fontSize: 10,
+      fontSize: 12,
     },
     productsContainer: {
       marginTop: 20
@@ -188,7 +191,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
 
   const isInteger = (val: any) => Number.isInteger(Number(val)) && !!val
 
-  const onProductClick = (business: any, categoryId: any, productId: any) => {
+
+  const onProductClick = (business: any, categoryId: any, productId: any, product: any) => {
     if (!isInteger(business?.id) ||
       !isInteger(categoryId) ||
       !isInteger(productId) ||
@@ -196,17 +200,20 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       showToast(ToastType.error, t('NOT_AVAILABLE', 'Not Available'))
       return
     }
-
+    const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
+    const productAddedToCartLength = currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === productId ? Cproduct?.quantity : 0) }, 0) || 0
     navigation.navigate('ProductDetails', {
       isRedirect: 'business',
       businessId: business?.id,
       categoryId: categoryId,
       productId: productId,
+      product: product,
       business: {
         store: business.slug,
         header: business.header,
         logo: business.logo,
-      }
+      },
+      productAddedToCartLength
     })
   }
 
@@ -226,17 +233,23 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }, [isFocused])
 
   return (
-    <BContainer>
+    <BContainer
+      style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+    >
       <SearchWrapper>
         <SearchBar
           lazyLoad
-          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+          {...(isChewLayout && { height: 55 })}
+          inputStyle={{ ...styles.searchInput }}
+          placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
           onSearch={(val: string) => handleChangeTermValue(val)}
           value={termValue}
           iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
         />
       </SearchWrapper>
+      <OText size={12} lineHeight={20} color={theme.colors.textThird} mLeft={5}>
+        {t('TYPE_AT_LEAST_3_CHARACTERS', 'Type at least 3 characters')}
+      </OText>
       {
         noResults && (
           <View>
@@ -253,26 +266,41 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           onNavigationRedirect={onNavigationRedirect}
           BusinessControllerSkeletons={BusinessControllerSkeletons}
           businessPaginationProps={paginationProps}
+          franchiseId={brandId}
+          hideBackBtn
+          titleStyle={{
+            paddingHorizontal: 0,
+            marginTop: 0,
+            marginLeft: 0
+          }}
         />
       )}
 
-      <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
-          {t('BUSINESSES', 'Businesses')}
-        </OText>
-      </OptionTitle>
-      <ScrollView horizontal>
+      {businessesSearchList.businesses?.length > 0 && (
+        <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
+          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
+            {t('BUSINESSES', 'Businesses')}
+          </OText>
+        </OptionTitle>
+      )}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
-          <BusinessController
+          <View
             key={business.id}
-            business={business}
-            isBusinessOpen={business.open}
-            enableIntersection={false}
-            handleCustomClick={() => onBusinessClick(business)}
-            handleUpdateBusinessList={handleUpdateBusinessList}
-            orderType={orderState?.options?.type}
-            style={{ width: screenWidth - 120, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
-          />
+            style={{
+              width: screenWidth - 120,
+              marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0
+            }}
+          >
+            <BusinessController
+              business={business}
+              isBusinessOpen={business.open}
+              enableIntersection={false}
+              handleCustomClick={() => onBusinessClick(business)}
+              handleUpdateBusinessList={handleUpdateBusinessList}
+              orderType={orderState?.options?.type}
+            />
+          </View>
         ))}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
           <LoadMoreBusinessContainer>
@@ -341,7 +369,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   product={product}
                   enableIntersection={false}
                   businessId={business?.id}
-                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
+                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id, product)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                   style={{ width: screenWidth - 80, maxWidth: screenWidth - 80, marginRight: 20 }}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { TouchableOpacity, StyleSheet, View, Dimensions, Platform } from 'react-native'
 import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
-import { OButton, OText } from '../shared'
+import { OButton, OIcon, OText } from '../shared'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
@@ -37,7 +37,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     handleChangeDate,
     handleChangeTime,
     handleAsap,
-    isAsap
+    getActualSchedule,
+    isAsap,
+    cateringPreorder,
+    preorderLeadTime
   } = props
 
   const theme = useTheme()
@@ -52,6 +55,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
   const { top } = useSafeAreaInsets()
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
   const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const styles = StyleSheet.create({
@@ -252,10 +257,45 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   useEffect(() => {
     if (selectDate === null) return
-    const selectedMenu = Object.keys(menu).length > 0 ? (menu?.use_business_schedule ? business : menu) : business
-    const _times = getTimes(selectDate, selectedMenu)
-    setTimeList(_times)
-  }, [selectDate, menu])
+    if (cateringPreorder) {
+      let _timeLists = []
+      const schedule = business && getActualSchedule()
+      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+        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))
+        .map(hour => {
+          return {
+            value: hour.startTime,
+            text: is12hours ? (
+              hour.startTime.includes('12')
+                ? `${hour.startTime}PM`
+                : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            ),
+            endText: is12hours ? (
+              hour.endTime.includes('12')
+                ? `${hour.endTime}PM`
+                : parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            )
+          }
+        })
+      if (_timeLists?.length > 0) {
+        setTimeList(_timeLists)
+      }
+    } else {
+      const selectedMenu = Object.keys(menu).length > 0 ? (menu?.use_business_schedule ? business : menu) : business
+      const _times = getTimes(selectDate, selectedMenu)
+      setTimeList(_times)
+    }
+  }, [selectDate, menu, business, cateringPreorder, hoursList, dateSelected])
 
   useEffect(() => {
     if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -263,6 +303,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   useEffect(() => {
     if (dateSelected) {
+
       const dateParts = dateSelected.split('-')
       const _dateSelected = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
       setSelectedDate(_dateSelected)
@@ -302,7 +343,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </View>
         </BusinessInfoWrapper>
-        {isPreOrderSetting && (
+        {isPreOrderSetting && !cateringPreorder && (
           <PreorderTypeWrapper>
             <OText
               size={16}
@@ -415,19 +456,36 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 />
               )}
             </View>
-            <TimeListWrapper nestedScrollEnabled={true}>
-              {(isEnabled && timeList?.length > 0) ? (
+            <TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
+              {((isEnabled || cateringPreorder) && timeList?.length > 0) ? (
                 <TimeContentWrapper>
                   {timeList.map((time: any, i: number) => (
                     <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
-                      <TimeItem active={timeSelected === time.value}>
+                      <TimeItem active={timeSelected === time.value} cateringPreorder={cateringPreorder}>
+                        {cateringPreorder && (
+                          <>
+                            {timeSelected === time.value ? (
+                              <OIcon
+                                src={theme.images.general.option_checked}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                              />
+                            ) : (
+                              <OIcon
+                                src={theme.images.general.option_normal}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                              />
+                            )}
+                          </>
+                        )}
                         <OText
-                          size={14}
+                          size={cateringPreorder ? 18 : 16}
                           color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
                           style={{
                             lineHeight: 24
                           }}
-                        >{time.text}</OText>
+                        >{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
                       </TimeItem>
                     </TouchableOpacity>
                   ))}
@@ -461,7 +519,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
               marginBottom: 12,
               textAlign: 'center'
             }}
-            >
+          >
             {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
           </OText>
         )}
@@ -480,7 +538,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
 export const BusinessPreorder = (props: any) => {
   const [{ configs }] = useConfig()
-
+  const [orderState] = useOrder()
   const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
 
   const currentDate = new Date()
@@ -492,10 +550,33 @@ export const BusinessPreorder = (props: any) => {
   currentDate.setHours(23)
   currentDate.setMinutes(59)
 
+  const cateringTypeString = orderState?.options?.type === 7
+  ? '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 businessPreorderProps = {
     ...props,
     UIComponent: BusinessPreorderUI,
-    maxDate: currentDate
+    maxDate: currentDate,
+    preorderLeadTime,
+    preorderSlotInterval,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringPreorder: !!cateringTypeString
   }
   return <MomentOption {...businessPreorderProps} />
 }

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

@@ -9,7 +9,7 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { shape } from '../../utils'
+import { lightenDarkenColor, shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
 import { OrderItAgain } from '../OrderItAgain'
 import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
@@ -39,7 +39,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleUpdateProducts,
     previouslyProducts,
     isFiltMode,
-    navigation
+    navigation,
+    businessSingleId
   } = props;
 
   const [, t] = useLanguage();
@@ -92,6 +93,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           handleUpdateProducts={handleUpdateProducts}
           currentCart={currentCart}
           searchValue={searchValue}
+          businessSingleId={businessSingleId}
         />
       )}
       {category.id &&
@@ -112,6 +114,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
               handleUpdateProducts={handleUpdateProducts}
               navigation={navigation}
+              businessSingleId={businessSingleId}
             />
           ))
       }
@@ -139,6 +142,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                       navigation={navigation}
+                      businessSingleId={businessSingleId}
                     />
                   ),
               )}
@@ -166,27 +170,31 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   style={bpStyles.catWrap}
                   onLayout={(event: any) => handleOnLayout(event, category.id)}
                 >
-                  <View style={bpStyles.catIcon}>
-                    <OIcon
-                      url={optimizeImage(category.image, 'h_250,c_limit')}
-                      width={41}
-                      height={41}
-                      style={{ borderRadius: 7.6 }}
-                    />
-                  </View>
+                  {!!category.image && (
+                    <View style={bpStyles.catIcon}>
+                      <OIcon
+                        url={optimizeImage(category.image, 'h_250,c_limit')}
+                        width={41}
+                        height={41}
+                        style={{ borderRadius: 7.6 }}
+                      />
+                    </View>
+                  )}
                   <OText size={16} weight="600">
                     {category.name}
                   </OText>
                   {category?.ribbon?.enabled && (
                     <RibbonBox
                       bgColor={category?.ribbon?.color}
+                      colorText={lightenDarkenColor(category?.ribbon?.color)}
+                      borderRibbon={lightenDarkenColor(category?.ribbon?.color)}
                       isRoundRect={category?.ribbon?.shape === shape?.rectangleRound}
                       isCapsule={category?.ribbon?.shape === shape?.capsuleShape}
                     >
                       <OText
                         size={10}
                         weight={'400'}
-                        color={theme.colors.white}
+                        color={lightenDarkenColor(category?.ribbon?.color) ? theme.colors.black : theme.colors.white}
                         numberOfLines={2}
                         ellipsizeMode='tail'
                         lineHeight={13}
@@ -238,6 +246,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       handleUpdateProducts={handleUpdateProducts}
                       navigation={navigation}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                      businessSingleId={businessSingleId}
                     />
                   ))}
                 </>

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

@@ -18,18 +18,23 @@ 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;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SubCategoriesContainer = styled.View`