ordering-ui-react-native 0.15.41 → 0.15.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.41",
+  "version": "0.15.44",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/pages/BusinessProductsList.tsx

@@ -31,6 +31,7 @@ const BusinessProductsList = (props: any) => {
       'open',
       'about',
       'description',
+      'ribbon',
       'address',
       'location',
       'schedule',

package/themes/business/src/components/OrdersListManager/index.tsx

@@ -77,6 +77,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
   const [openSearchModal, setOpenSearchModal] = useState(false)
   const [openSLASettingModal, setOpenSLASettingModal] = useState(false)
   const [slaSettingTime, setSlaSettingTime] = useState(6000)
+  const [configState] = useConfig()
   const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
   const [selectedTabStatus, setSelectedTabStatus] = useState<any>([])
@@ -311,55 +312,57 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
-      <View style={styles.SLAwrapper}>
-        <View style={{ flex: 0.5 }}>
-          <OButton
-            text={t('SLA_SETTING', 'SLA’s Settings')}
-            textStyle={{ color: theme.colors.backArrow }}
-            imgRightSrc={null}
-            style={{
-              backgroundColor: theme.colors.inputChat,
-              borderRadius: 7.6,
-              zIndex: 10,
-              borderWidth: 0,
-              minHeight: 40
-            }}
-            onClick={onClickSetting}
-          />
-        </View>
-        <View style={{ width: 10, height: '100%' }} />
-        <View style={{ flex: 0.5, justifyContent: 'center' }}>
-          <SelectDropdown
-            defaultButtonText={t('SLA', 'SLA\'s')}
-            data={preorderTypeList}
-            onSelect={(selectedItem, index) => {
-              onFiltered && onFiltered({ ...search, timeStatus: selectedItem?.key })
-            }}
-            buttonTextAfterSelection={(selectedItem, index) => {
-              return selectedItem.name
-            }}
-            rowTextForSelection={(item, index) => {
-              return item.key
-            }}
-            buttonStyle={styles.selectOption}
-            buttonTextStyle={styles.buttonTextStyle}
-            renderDropdownIcon={isOpened => {
-              return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
-            }}
-            dropdownStyle={styles.dropdownStyle}
-            dropdownOverlayColor='transparent'
-            rowStyle={styles.rowStyle}
-            renderCustomizedRowChild={(item, index) => {
-              return (
-                <SlaOption>
-                  {index !== 0 && <OrderStatus timeState={item?.key} />}
-                  <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
-                </SlaOption>
-              );
-            }}
-          />
+      {configState?.configs?.order_deadlines_enabled?.value === '1' && (
+        <View style={styles.SLAwrapper}>
+          <View style={{ flex: 0.5 }}>
+            <OButton
+              text={t('SLA_SETTING', 'SLA’s Settings')}
+              textStyle={{ color: theme.colors.backArrow }}
+              imgRightSrc={null}
+              style={{
+                backgroundColor: theme.colors.inputChat,
+                borderRadius: 7.6,
+                zIndex: 10,
+                borderWidth: 0,
+                minHeight: 40
+              }}
+              onClick={onClickSetting}
+            />
+          </View>
+          <View style={{ width: 10, height: '100%' }} />
+          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+            <SelectDropdown
+              defaultButtonText={t('SLA', 'SLA\'s')}
+              data={preorderTypeList}
+              onSelect={(selectedItem, index) => {
+                onFiltered && onFiltered({ ...search, timeStatus: selectedItem?.key })
+              }}
+              buttonTextAfterSelection={(selectedItem, index) => {
+                return selectedItem.name
+              }}
+              rowTextForSelection={(item, index) => {
+                return item.key
+              }}
+              buttonStyle={styles.selectOption}
+              buttonTextStyle={styles.buttonTextStyle}
+              renderDropdownIcon={isOpened => {
+                return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+              }}
+              dropdownStyle={styles.dropdownStyle}
+              dropdownOverlayColor='transparent'
+              rowStyle={styles.rowStyle}
+              renderCustomizedRowChild={(item, index) => {
+                return (
+                  <SlaOption>
+                    {index !== 0 && <OrderStatus timeState={item?.key} />}
+                    <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
+                  </SlaOption>
+                );
+              }}
+            />
+          </View>
         </View>
-      </View>
+      )}
 
       <Sides>
         <LeftSide>

package/themes/business/src/components/OrdersOption/index.tsx

@@ -110,6 +110,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const theme = useTheme();
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils()
+  const [configState] = useConfig()
   const [orientationState] = useDeviceOrientation();
   const [, { showToast }] = useToast();
   const [openSearchModal, setOpenSearchModal] = useState(false)
@@ -439,55 +440,57 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
-      <View style={styles.SLAwrapper}>
-        <View style={{ flex: 0.5 }}>
-          <OButton
-            text={t('SLA_SETTING', 'SLA’s Settings')}
-            textStyle={{ color: theme.colors.backArrow }}
-            imgRightSrc={null}
-            style={{
-              backgroundColor: theme.colors.inputChat,
-              borderRadius: 7.6,
-              zIndex: 10,
-              borderWidth: 0,
-              minHeight: 40
-            }}
-            onClick={onClickSetting}
-          />
-        </View>
-        <View style={{ width: 10, height: '100%' }} />
-        <View style={{ flex: 0.5, justifyContent: 'center' }}>
-          <SelectDropdown
-            defaultButtonText={t('SLA', 'SLA\'s')}
-            data={preorderTypeList}
-            onSelect={(selectedItem, index) => {
-              onFiltered && onFiltered({ ...search, timeStatus: selectedItem?.key })
-            }}
-            buttonTextAfterSelection={(selectedItem, index) => {
-              return selectedItem.name
-            }}
-            rowTextForSelection={(item, index) => {
-              return item.key
-            }}
-            buttonStyle={styles.selectOption}
-            buttonTextStyle={styles.buttonTextStyle}
-            renderDropdownIcon={isOpened => {
-              return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
-            }}
-            dropdownStyle={styles.dropdownStyle}
-            dropdownOverlayColor='transparent'
-            rowStyle={styles.rowStyle}
-            renderCustomizedRowChild={(item, index) => {
-              return (
-                <SlaOption>
-                  {index !== 0 && <OrderStatus timeState={item?.key} />}
-                  <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
-                </SlaOption>
-              );
-            }}
-          />
+      {configState?.configs?.order_deadlines_enabled?.value === '1' && (
+        <View style={styles.SLAwrapper}>
+          <View style={{ flex: 0.5 }}>
+            <OButton
+              text={t('SLA_SETTING', 'SLA’s Settings')}
+              textStyle={{ color: theme.colors.backArrow }}
+              imgRightSrc={null}
+              style={{
+                backgroundColor: theme.colors.inputChat,
+                borderRadius: 7.6,
+                zIndex: 10,
+                borderWidth: 0,
+                minHeight: 40
+              }}
+              onClick={onClickSetting}
+            />
+          </View>
+          <View style={{ width: 10, height: '100%' }} />
+          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+            <SelectDropdown
+              defaultButtonText={t('SLA', 'SLA\'s')}
+              data={preorderTypeList}
+              onSelect={(selectedItem, index) => {
+                onFiltered && onFiltered({ ...search, timeStatus: selectedItem?.key })
+              }}
+              buttonTextAfterSelection={(selectedItem, index) => {
+                return selectedItem.name
+              }}
+              rowTextForSelection={(item, index) => {
+                return item.key
+              }}
+              buttonStyle={styles.selectOption}
+              buttonTextStyle={styles.buttonTextStyle}
+              renderDropdownIcon={isOpened => {
+                return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+              }}
+              dropdownStyle={styles.dropdownStyle}
+              dropdownOverlayColor='transparent'
+              rowStyle={styles.rowStyle}
+              renderCustomizedRowChild={(item, index) => {
+                return (
+                  <SlaOption>
+                    {index !== 0 && <OrderStatus timeState={item?.key} />}
+                    <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
+                  </SlaOption>
+                );
+              }}
+            />
+          </View>
         </View>
-      </View>
+      )}
       <FiltersTab>
         <ScrollView
           ref={scrollRefTab}
@@ -926,6 +929,7 @@ export const Timer = () => {
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
+  const [configState] = useConfig()
   const theme = useTheme()
   const ordersProps = {
     ...props,

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View, Platform, PlatformIOSStatic } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import moment from 'moment'
-import { useLanguage, useUtils } from 'ordering-components/native';
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { OButton, OIcon, OText } from '../shared';
 import {
   Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder, Timestatus
@@ -27,8 +27,14 @@ export const PreviousOrders = (props: any) => {
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
+  const [configState] = useConfig()
   const theme = useTheme();
-  const [currentTime, setCurrentTime] = useState()
+  const [, setCurrentTime] = useState()
+  const [allowColumns, setAllowColumns] = useState({
+    timer: true,
+    slaBar: true,
+  })
+
   const [orientationState] = useDeviceOrientation();
 
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
@@ -93,23 +99,41 @@ export const PreviousOrders = (props: any) => {
     },
   });
 
-  const getDelayTime = (order: any) => {
+
+  const getDelayMinutes = (order: any) => {
     // targetMin = delivery_datetime  + eta_time - now()
+    const offset = 300
+    const cdtToutc = parseDate(moment(order?.delivery_datetime).add(offset, 'minutes'))
     const _delivery = order?.delivery_datetime_utc
+      ? parseDate(order?.delivery_datetime_utc)
+      : parseDate(cdtToutc)
     const _eta = order?.eta_time
-    const tagetedMin = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'minutes')
+    return moment(_delivery.replace('AM', '')).add(_eta, 'minutes').diff(moment().utc(), 'minutes')
+  }
+
+  const displayDelayedTime = (order: any) => {
+    let tagetedMin = getDelayMinutes(order)
+    // get day, hour and minutes
+    const sign = tagetedMin >= 0 ? '' : '- '
+    tagetedMin = Math.abs(tagetedMin)
     let day = Math.floor(tagetedMin / 1440)
     const restMinOfTargetedMin = tagetedMin - 1440 * day
-    let restHours: any = Math.floor(restMinOfTargetedMin / 60)
-    let restMins: any = restMinOfTargetedMin - 60 * restHours
+    let restHours = Math.floor(restMinOfTargetedMin / 60)
+    let restMins = restMinOfTargetedMin - 60 * restHours
+    // make standard time format
+    day = day === 0 ? '' : day + 'day  '
+    restHours = restHours < 10 ? '0' + restHours : restHours
+    restMins = restMins < 10 ? '0' + restMins : restMins
 
-    if (order?.time_status === 'in_time' || order?.time_status === 'at_risk') day = Math.abs(day)
-    if (restHours < 10) restHours = ('0' + restHours)
-    if (restMins < 10) restMins = ('0' + restMins)
-    const finalTaget = day + 'day  ' + restHours + ':' + restMins
+    const finalTaget = sign + day + restHours + ':' + restMins
     return finalTaget
   }
 
+  const getStatusClassName = (minutes: any) => {
+    if (isNaN(Number(minutes))) return 0
+    return minutes > 0 ? 'in_time' : minutes === 0 ? 'at_risk' : 'delayed'
+  }
+
   useEffect(() => {
     const interval = setInterval(() => {
       const date: any = Date.now()
@@ -119,6 +143,15 @@ export const PreviousOrders = (props: any) => {
     return () => clearInterval(interval)
   }, [])
 
+  useEffect(() => {
+    const slaSettings = configState?.configs?.order_deadlines_enabled?.value === '1'
+    setAllowColumns({
+      ...allowColumns,
+      timer: slaSettings,
+      slaBar: slaSettings
+    })
+  }, [configState.loading])
+
   let hash: any = {};
 
   return (
@@ -144,7 +177,9 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                    <Timestatus style={{ backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }} />
+                  {allowColumns?.slaBar && (
+                    <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
+                  )}
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>
@@ -189,10 +224,10 @@ export const PreviousOrders = (props: any) => {
                             ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
                             : parseDate(order?.delivery_datetime, { utc: false })}
                         </OText>
-                        {(currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && (
+                        {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
                           <>
                             <OText> · </OText>
-                            <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
+                            <OText style={styles.date} color={getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : ''} >{displayDelayedTime(order)}</OText>
                           </>
                         )}
                       </View>

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

@@ -4,7 +4,7 @@ import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import { BusinessInformation } from '../BusinessInformation';
 import { BusinessReviews } from '../BusinessReviews';
 import dayjs from 'dayjs';
@@ -22,6 +22,8 @@ import {
 	BusinessInfoItem,
 	WrapReviews,
 	WrapBusinessInfo,
+	TitleWrapper,
+	RibbonBox
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -121,9 +123,29 @@ export const BusinessBasicInformation = (
 							<PlaceholderLine height={30} width={20} />
 						</Placeholder>
 					) : (
-						<OText size={24} weight={'600'}>
-							{business?.name}
-						</OText>
+						<TitleWrapper>
+							<OText size={24} weight={'600'}>
+								{business?.name}
+							</OText>
+							{business?.ribbon?.enabled && (
+								<RibbonBox
+									bgColor={business?.ribbon?.color}
+									isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+									isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+								>
+									<OText
+										size={10}
+										weight={'400'}
+										color={theme.colors.white}
+										numberOfLines={2}
+										ellipsizeMode='tail'
+										lineHeight={13}
+									>
+										{business?.ribbon?.text}
+									</OText>
+								</RibbonBox>
+							)}
+						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
 				{loading ? (

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 import { Platform } from 'react-native';
 
 export const BusinessContainer = styled.View`
@@ -41,3 +41,30 @@ export const WrapBusinessInfo = styled.TouchableOpacity`
   top: 16px;
   end: 39px;
 `;
+
+export const TitleWrapper = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const RibbonBox = styled.View`
+  margin-left: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 2px 8px;
+  max-width: 180px;
+  align-self: flex-start;
+
+  ${(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;
+  `}
+`

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

@@ -43,6 +43,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
+	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
 	const styles = StyleSheet.create({
@@ -135,7 +136,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</View>
 				)}
 				<BusinessState>
-					{!isBusinessOpen && (
+					{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 						<View style={styles.businessStateView}>
 							<OText
 								color={theme.colors.textThird}

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 } from './styles';
 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'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -110,6 +111,24 @@ 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' }}>

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,23 @@ 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;
+  `}
 `

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

@@ -202,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />

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

@@ -7,10 +7,11 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
+import { shape } from '../../utils';
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const {
@@ -46,8 +47,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		productStyle: {
 			width: 75,
 			height: 75,
-			borderRadius: 7.6,
-			marginStart: 12
+			borderRadius: 7.6
 		},
 		quantityContainer: {
 			position: 'absolute',
@@ -136,21 +136,42 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			{product?.images ? (
-				<FastImage
-					style={styles.productStyle}
-					source={{
-						uri: optimizeImage(product?.images, 'h_250,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-			) : (
-				<OIcon
-					src={theme?.images?.dummies?.product}
-					style={styles.productStyle}
-				/>
-			)}
+			<LogoWrapper>
+				{product?.ribbon?.enabled && (
+					<RibbonBox
+						bgColor={product?.ribbon?.color}
+						isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+						isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+					>
+						<OText
+							size={10}
+							weight={'400'}
+							color={theme.colors.white}
+							numberOfLines={2}
+              ellipsizeMode='tail'
+							lineHeight={13}
+						>
+							{product?.ribbon?.text}
+						</OText>
+					</RibbonBox>
+				)}
+				{product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
+			</LogoWrapper>
+
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
   flex: 1;
@@ -31,3 +31,30 @@ export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const LogoWrapper = styled.View`
+  position: relative;
+  margin-left: 12px;
+`
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 60px;
+
+  ${(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;
+  `}
+`

package/themes/original/src/utils/index.tsx

@@ -170,6 +170,15 @@ export const getTypesText = (value: number) => {
   return ret?.content;
 }
 
+/**
+ * List shape for ribbon
+ */
+ export const shape = {
+  rectangle: 'rectangle',
+  rectangleRound: 'rectangle_round',
+  capsuleShape: 'capsule_shape'
+}
+
 /**
  * Function to transform degree to radian
  * @param {number} value for transform