ordering-ui-react-native 0.15.40 → 0.15.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.40",
+  "version": "0.15.43",
   "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/index.tsx

@@ -60,6 +60,7 @@ import {
 	OAlert,
 	OModal,
 	OBottomPopup,
+  HeaderTitle
 } from './src/components/shared';
 
 import { Container } from './src/layouts/Container';
@@ -134,6 +135,7 @@ export {
 	OAlert,
 	OModal,
 	OBottomPopup,
+  HeaderTitle,
 
 	// layout
 	Container,

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

@@ -108,6 +108,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 			top: 12,
 			zIndex: 1002,
 		},
+		wrapperNavbar: Platform.OS === 'ios'
+			? {  paddingVertical: 0, paddingHorizontal: 40 }
+			: {  paddingVertical: 20, paddingHorizontal: 40 }
 	});
 
 	const [, t] = useLanguage();
@@ -500,16 +503,18 @@ const AddressFormUI = (props: AddressFormParams) => {
 			keyboardShouldPersistTaps='always'
 			listViewDisplayed={false}
 		>
-			<NavBar
-				title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
-				titleAlign={'center'}
-				onActionLeft={goToBack}
-				showCall={false}
-				paddingTop={20}
-				btnStyle={{ paddingLeft: 40 }}
-				titleStyle={{ fontSize: 14 }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-			/>
+			<View style={styles.wrapperNavbar}>
+				<NavBar
+					title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
+					titleAlign={'center'}
+					onActionLeft={goToBack}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+				/>
+			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
 				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
 					<View>

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
 import { AddressListContainer, AddressItem } from './styles'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
 import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
@@ -261,6 +261,32 @@ const AddressListUI = (props: AddressListParams) => {
 					)}
 					{!addressList.loading && !addressList.error && (
 						<>
+							{addressList?.addresses?.length === 0 && (
+								<View
+									style={{
+										flexDirection: 'column',
+										paddingHorizontal: 10,
+										paddingTop: 20
+									}}
+								>
+									<OText
+										size={24}
+										lineHeight={36}
+										weight={Platform.OS === 'ios' ? '600' : 'bold'}
+										style={{
+											textAlign: 'center',
+											marginRight: 40,
+											color: theme.colors.textNormal,
+											paddingHorizontal: 0,
+											width: '100%',
+											marginLeft: 0
+										}}
+									>
+										{t('ADDRESS_LIST', 'Address List')}
+									</OText>
+								</View>
+							)}
+
 							<OButton
 								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
 								imgRightSrc=''

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/BusinessProductsCategories/index.tsx

@@ -111,7 +111,7 @@ const BusinessProductsCategoriesUI = (props: any) => {
 				categories.length &&
 				categories.map((category: any) => (
 					<Tab
-						key={category.name}
+						key={category.id}
 						onPress={() => handleCategoryScroll(category)}
 						style={[
 							category.id === 'featured' && !featured && styles.featuredStyle,

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

@@ -4,11 +4,12 @@ import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
 import { OButton, OIcon, OModal, OText } from '../shared';
-import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
+import { ProductsContainer, ErrorMessage, WrapperNotFound, RibbonBox } 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/CartContent/index.tsx

@@ -22,9 +22,9 @@ export const CartContent = (props: any) => {
 		<CCContainer>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
-					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
+					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
 						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText>
+					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (

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

@@ -540,6 +540,11 @@ const styles = StyleSheet.create({
 
 export const Messages = (props: MessagesParams) => {
 	const [allMessages, setAllMessages] = useState(props.messages)
+
+	useEffect(() => {
+		setAllMessages(props.messages)
+	}, [props.messages])
+
 	const MessagesProps = {
 		...props,
 		UIComponent: MessagesUI,

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

@@ -1,7 +1,5 @@
-
 import styled, { css } from 'styled-components/native'
 
-
 export const Wrapper = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -39,4 +37,4 @@ export const MessageTypeItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.whiteGray};
   `}
-`
+`

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/components/UserProfile/index.tsx

@@ -136,10 +136,10 @@ const ProfileListUI = (props: ProfileParams) => {
 	}
 
 	return (
-		<View style={{ flex: 1, height: height - top - bottom - 62 }}>
-			<OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
+		<View style={{ flex: 1, height: height - top - bottom - 62, paddingTop: 20 }}>
+			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
 				{t('PROFILE', 'Profile')}
-			</OText>
+			</OText> */}
 			<CenterView style={styles.pagePadding}>
 				{user?.photo && (
 					<View style={styles.photo}>

package/themes/original/src/components/shared/HeaderTitle.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import OText from './OText';
+
+const HeaderTitle = (props: any) => {
+  const { text, style } = props
+  return (
+    <OText
+      size={24}
+      style={style ?? {
+        marginTop: 30,
+        paddingHorizontal: 40,
+        textTransform: 'capitalize'
+      }}
+    >
+      {text}
+    </OText>
+  )
+}
+
+export default HeaderTitle

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

@@ -11,6 +11,7 @@ import OKeyButton from './OKeyButton'
 import OModal from './OModal'
 import OAlert from './OAlert'
 import OBottomPopup from './OBottomPopup'
+import HeaderTitle from './HeaderTitle'
 
 export {
 	OText,
@@ -26,4 +27,5 @@ export {
 	OAlert,
   	OModal,
 	OBottomPopup,
+  HeaderTitle
 }

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