ordering-ui-react-native 0.17.85 → 0.17.86

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

@@ -123,7 +123,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const isGiftCardOrder = !order?.business_id
-
+  const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
+  const hideDeliveryProgress = theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const hideBusinessPhone = theme?.confirmation?.components?.business?.components?.phone?.hidden
+  const hideBusinessMessages = theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const hideBusinessEmail = theme?.confirmation?.components?.business?.components?.email?.hidden
+  const hideBusinessAddress = theme?.confirmation?.components?.business?.components?.address?.hidden
+  const hideDriverName = theme?.confirmation?.components?.driver?.components?.name?.hidden
+  const hideDriverPhone = theme?.confirmation?.components?.driver?.components?.phone?.hidden
+  const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
+  const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
+  const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -201,7 +211,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     ) && !order.review && !isReviewed && handleClickOrderReview(order)
   }
 
-  
+
   const resfreshOrder = () => {
     getOrder()
   }
@@ -326,7 +336,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [driverLocation]);
 
   return (
-    <OrderDetailsContainer 
+    <OrderDetailsContainer
       keyboardShouldPersistTaps="handled"
       refreshControl={
         <RefreshControl
@@ -399,13 +409,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               style={{ marginTop: Platform.OS === 'ios' ? 0 : 20 }}
               titleWrapStyle={{ paddingHorizontal: 0 }}
               titleStyle={{ marginRight: 0, marginLeft: 0 }}
-              subTitle={<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+              subTitle={!hideDeliveryDate && <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
                 {
                   activeStatus.includes(order?.status)
                     ? order?.eta_time + 'min'
                     : order?.delivery_datetime_utc
-                        ? parseDate(order?.delivery_datetime_utc)
-                        : parseDate(order?.delivery_datetime, { utc: false })
+                      ? parseDate(order?.delivery_datetime_utc)
+                      : parseDate(order?.delivery_datetime, { utc: false })
                 }
               </OText>}
             />
@@ -445,7 +455,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       activeOpacity={0.7}
                       style={{ marginTop: 6 }}
                       onPress={() => setIsOrderHistory(true)}
-  
                     >
                       <OText
                         size={12}
@@ -457,26 +466,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       </OText>
                     </TouchableOpacity>
                   </View>
-  
-                  <StaturBar>
-                    <LinearGradient
-                      start={{ x: 0.0, y: 0.0 }}
-                      end={{
-                        x: getOrderStatus(order?.status)?.percentage || 0,
-                        y: 0,
-                      }}
-                      locations={[0.9999, 0.9999]}
-                      colors={[theme.colors.primary, theme.colors.backgroundGray100]}
-                      style={styles.statusBar}
-                    />
-                  </StaturBar>
-                  <OText
-                    size={16}
-                    lineHeight={24}
-                    weight={'600'}
-                    color={theme.colors.textNormal}>
-                    {getOrderStatus(order?.status)?.value}
-                  </OText>
+                  {!hideDeliveryProgress && (
+                    <>
+                      <StaturBar>
+                        <LinearGradient
+                          start={{ x: 0.0, y: 0.0 }}
+                          end={{
+                            x: getOrderStatus(order?.status)?.percentage || 0,
+                            y: 0,
+                          }}
+                          locations={[0.9999, 0.9999]}
+                          colors={[theme.colors.primary, theme.colors.backgroundGray100]}
+                          style={styles.statusBar}
+                        />
+                      </StaturBar>
+                      <OText
+                        size={16}
+                        lineHeight={24}
+                        weight={'600'}
+                        color={theme.colors.textNormal}>
+                        {getOrderStatus(order?.status)?.value}
+                      </OText>
+                    </>
+                  )}
                 </OrderData>
                 <View
                   style={{
@@ -520,7 +532,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       {order?.business?.name}
                     </OText>
                     <Icons>
-                      {!!order?.business?.cellphone && (
+                      {!!order?.business?.cellphone && !hideBusinessPhone && (
                         <TouchableOpacity
                           onPress={() => order?.business?.cellphone &&
                             Linking.openURL(`tel:${order?.business?.cellphone}`)
@@ -534,25 +546,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           />
                         </TouchableOpacity>
                       )}
-                      <TouchableOpacity
-                        style={{ paddingStart: 5 }}
-                        onPress={() => handleGoToMessages('business')}>
-                        <OIcon
-                          src={theme.images.general.chat}
-                          width={16}
-                          color={theme.colors.disabled}
-                        />
-                      </TouchableOpacity>
+                      {!hideBusinessMessages && (
+                        <TouchableOpacity
+                          style={{ paddingStart: 5 }}
+                          onPress={() => handleGoToMessages('business')}>
+                          <OIcon
+                            src={theme.images.general.chat}
+                            width={16}
+                            color={theme.colors.disabled}
+                          />
+                        </TouchableOpacity>
+                      )}
                     </Icons>
                   </View>
-                  <OText
-                    size={12}
-                    lineHeight={18}
-                    color={theme.colors.textNormal}
-                    mBottom={2}>
-                    {order?.business?.email}
-                  </OText>
-                  {!!order?.business?.cellphone && (
+                  {!hideBusinessEmail && (
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textNormal}
+                      mBottom={2}>
+                      {order?.business?.email}
+                    </OText>
+                  )}
+                  {!!order?.business?.cellphone && !hideBusinessPhone && (
                     <OText
                       size={12}
                       lineHeight={18}
@@ -561,9 +577,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       {order?.business?.cellphone}
                     </OText>
                   )}
-                  <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                    {order?.business?.address}
-                  </OText>
+                  {!hideBusinessAddress && (
+                    <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+                      {order?.business?.address}
+                    </OText>
+                  )}
                 </View>
                 {directionTypes.includes(order?.delivery_type) && (
                   <OButton
@@ -587,7 +605,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 )}
               </OrderBusiness>
             )}
-            
+
             {!isGiftCardOrder && placeSpotTypes.includes(order?.delivery_type) && (
               <PlaceSpotWrapper>
                 <PlaceSpot
@@ -625,14 +643,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     mBottom={2}>
                     {order?.customer?.name} {order?.customer?.lastname}
                   </OText>
-                  <OText
-                    size={12}
-                    lineHeight={18}
-                    color={theme.colors.textNormal}
-                    mBottom={2}>
-                    {order?.customer?.address}
-                  </OText>
-                  {(!!order?.customer?.cellphone) && (
+                  {!hideCustomerAddress && (
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textNormal}
+                      mBottom={2}>
+                      {order?.customer?.address}
+                    </OText>
+                  )}
+                  {(!!order?.customer?.cellphone && !hideCustomerPhone) && (
                     <OText
                       size={12}
                       lineHeight={18}
@@ -700,23 +720,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           alignItems: 'center',
                           justifyContent: 'space-between',
                         }}>
-                        <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
-                          {order?.driver?.name} {order?.driver?.lastname}
-                        </OText>
-                        <Icons>
-                          <TouchableOpacity
-                            onPress={() => handleGoToMessages('driver')}>
-                            <OIcon
-                              src={theme.images.general.chat}
-                              width={16}
-                              color={theme.colors.disabled}
-                            />
-                          </TouchableOpacity>
-                        </Icons>
+                        {!hideDriverName && (
+                          <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
+                            {order?.driver?.name} {order?.driver?.lastname}
+                          </OText>
+                        )}
+                        {!hideDriverMessages && (
+                          <Icons>
+                            <TouchableOpacity
+                              onPress={() => handleGoToMessages('driver')}>
+                              <OIcon
+                                src={theme.images.general.chat}
+                                width={16}
+                                color={theme.colors.disabled}
+                              />
+                            </TouchableOpacity>
+                          </Icons>
+                        )}
                       </View>
-                      <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
-                        {order?.driver?.cellphone}
-                      </OText>
+                      {!hideDriverPhone && (
+                        <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
+                          {order?.driver?.cellphone}
+                        </OText>
+                      )}
                     </InfoBlock>
                   </Customer>
                 </OrderDriver>

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

@@ -31,12 +31,14 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-
+	const orderTypeTitle = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
+	const orderTypeDescription = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
+	const orderTypeCallAction = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
-			label: t(type.content, type.content),
-			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+			label: orderTypeTitle(type.value) || t(type.content, type.content),
+			description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
 		}
 	})
 
@@ -113,7 +115,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
 													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
 													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
 														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>

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

@@ -151,7 +151,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           order: {
             id: order?.id,
             business_id: order?.business_id,
-            logo: order?.business?.length > 1 ? order?.business?.map?.((business : any) => business?.logo): order?.business?.logo,
+            logo: order?.business?.length > 1 ? order?.business?.map?.((business: any) => business?.logo) : order?.business?.logo,
             driver: order?.driver,
             products: order?.products,
             review: order?.review,
@@ -174,7 +174,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       handleClickOrder(order?.uuid)
       return
     }
-    if (order?.cart_group_id){
+    if (order?.cart_group_id) {
       onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
     } else {
       onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
@@ -189,6 +189,15 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     setConfirm({ ...confirm, open: false, title: null })
   }
 
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideFavorite = theme?.orders?.components?.favorite?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
+
   return (
     <>
       <CardAnimation
@@ -196,7 +205,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
         style={[styles.container]}
       >
         <InnerContainer>
-          {(!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
+          {!hideBusinessLogo && (!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
             <>
               {order?.business?.length > 1 ? (
                 <MultiLogosContainer>
@@ -205,7 +214,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                       {i > 1 ? (
                         <>
                           {console.log(order?.business?.length - 2)}
-                        <OText mRight={3}> + {order?.business?.length - 2}</OText>
+                          <OText mRight={3}> + {order?.business?.length - 2}</OText>
                         </>
                       ) : (
                         <Logo style={styles.logoWrapper} isMulti>
@@ -232,11 +241,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           )}
           <CardInfoWrapper>
             <ContentHeader>
-              <View style={{ flex: 1 }}>
-                <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-                  {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
-                </OText>
-              </View>
+              {(order?.business?.length > 1 && !hideOrderNumber) || (!order?.business?.length && !hideBusinessName) && (
+                <View style={{ flex: 1 }}>
+                  <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                    {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
+                  </OText>
+                </View>
+              )}
               {!!!pastOrders && (
                 <>
                   {isMessageView ? (
@@ -260,7 +271,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
               )}
               {!!pastOrders && (
                 <ButtonWrapper>
-                  {allowedOrderStatus.includes(parseInt(order?.status)) &&
+                  {!hideReviewOrderButton &&
+                    allowedOrderStatus.includes(parseInt(order?.status)) &&
                     !order.review && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
@@ -270,7 +282,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {order.cart && (
+                  {order.cart && !hideReorderButton && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}
@@ -290,7 +302,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
             <ContentFooter>
               <View style={{ flex: 1 }}>
                 <View style={styles.infoText}>
-                  {(!!!pastOrders || order?.business?.length > 1) && (
+                  {(!!!pastOrders || order?.business?.length > 1) && !hideOrderNumber && (
                     <>
                       <OText
                         size={10}
@@ -313,28 +325,32 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                       </OText>
                     </>
                   )}
+                  {!hideDate && (
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.textSecondary}
+                      style={{ marginVertical: 3 }}
+                      numberOfLines={1}>
+                      {
+                        pastOrders
+                          ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
+                          : order?.eta_time + 'min'
+                      }
+                    </OText>
+                  )}
+                </View>
+                {!hideOrderStatus && (
                   <OText
+                    color={theme.colors.primary}
                     size={10}
                     lineHeight={15}
-                    color={theme.colors.textSecondary}
-                    style={{ marginVertical: 3 }}
                     numberOfLines={1}>
-                    {
-                      pastOrders
-                        ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
-                        : order?.eta_time + 'min'
-                    }
+                    {getOrderStatus(order.status)?.value}
                   </OText>
-                </View>
-                <OText
-                  color={theme.colors.primary}
-                  size={10}
-                  lineHeight={15}
-                  numberOfLines={1}>
-                  {getOrderStatus(order.status)?.value}
-                </OText>
+                )}
               </View>
-              {!isMessageView && !order?.business?.length && (
+              {!isMessageView && !order?.business?.length && !hideFavorite && (
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}

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

@@ -11,7 +11,7 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
+import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper, WrapTags, TagsContainer } from './styles';
 import { StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
@@ -39,14 +39,19 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		enableIntersection,
 		navigation,
 		businessId,
-		isPreviously
+		isPreviously,
+		viewString
 	} = props;
 
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
-
+	const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+	const hideProductLogo = viewString
+		? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
+		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
 	const textSize = isChewLayout ? 12 : 10
+	const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
 
 	const styles = StyleSheet.create({
 		container: {
@@ -100,6 +105,11 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			textDecorationLine: 'line-through',
 			marginLeft: 7,
 			marginRight: 7
+		},
+		productTagsStyle: {
+			width: 30,
+    		height: 30,
+			marginRight: 5
 		}
 	});
 
@@ -168,7 +178,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						(style && { ...style })
 					]}
 				>
-					<View style={{ flexDirection: 'row' }}>
+					<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
 								transform: [{ translateX: 25 }, { translateY: -25 }],
@@ -205,15 +215,33 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								{product?.offer_price !== null && !!product?.in_offer && (
 									<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 								)}
+								{product?.tags && product?.tags.length > 0 && (
+									<WrapTags>
+										{product?.tags.map((tag: any, i: any) => (
+											<TagsContainer key={i}>
+												<FastImage
+													style={styles.productTagsStyle}
+													source={tag.image ? {
+														uri: optimizeImage(tag.image, 'h_250,c_limit'),
+														priority: FastImage.priority.normal,
+													} : theme?.images?.dummies?.product}
+													resizeMode={FastImage.resizeMode.cover}
+												/>
+											</TagsContainer>
+										))}
+									</WrapTags>
+								)}
 							</PricesContainer>
-							<OText
-								size={textSize}
-								numberOfLines={!isPreviously ? 2 : 1}
-								ellipsizeMode="tail"
-								color={theme.colors.textSecondary}
-								style={styles.line15}>
-								{product?.description}
-							</OText>
+							{!hideProductDescription && (
+								<OText
+									size={textSize}
+									numberOfLines={!isPreviously ? 2 : 1}
+									ellipsizeMode="tail"
+									color={theme.colors.textSecondary}
+									style={styles.line15}>
+									{product?.description}
+								</OText>
+							)}
 							{isPreviously && (
 								<OText
 									size={textSize}
@@ -225,7 +253,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</OText>
 							)}
 						</CardInfo>
-						<LogoWrapper>
+						<LogoWrapper logoPosition={logoPosition}>
 							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
@@ -244,14 +272,16 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							<FastImage
-								style={styles.productStyle}
-								source={product?.images ? {
-									uri: optimizeImage(product?.images, 'h_250,c_limit'),
-									priority: FastImage.priority.normal,
-								} : theme?.images?.dummies?.product}
-								resizeMode={FastImage.resizeMode.cover}
-							/>
+							{!hideProductLogo && (
+								<FastImage
+									style={styles.productStyle}
+									source={product?.images ? {
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+										priority: FastImage.priority.normal,
+									} : theme?.images?.dummies?.product}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							)}
 						</LogoWrapper>
 
 						{(isSoldOut || maxProductQuantity <= 0) && (

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

@@ -27,7 +27,17 @@ export const PricesContainer = styled.View`
 
 export const LogoWrapper = styled.View`
   position: relative;
-  margin-left: 12px;
+  margin-left: ${(props) => !props.logoPosition || props.logoPosition === 'right' ? '12px' : '0px'};
+  margin-right: ${(props) => props.logoPosition === 'right' ? '0px' : '12px'};
+`
+export const WrapTags = styled.View`
+  display: flex;
+  flex-direction: row;
+  margin-left: 10px;
+`
+export const TagsContainer = styled.View`
+    display: flex;
+    margin: auto;
 `
 
 export const RibbonBox = styled.View`