ordering-ui-react-native 0.16.93-release → 0.16.94-release

package/package.json

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

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

@@ -522,7 +522,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             style={{ borderRadius: 7, height: 45 }}
             parentStyle={{ width: '100%' }}
             textStyle={{ color: '#FFF', fontSize: 18 }}
-            isDisabled={!rejectReason && showTextArea}
+            isDisabled={showTextArea && !comments}
             onClick={() => handleAcceptOrReject()}
           />
         </View>

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

@@ -69,6 +69,8 @@ const ChatUI = (props: MessagesParams) => {
   const [, { showToast }] = useToast();
   const theme = useTheme();
   const [messageList, setMessageList] = useState<any>([])
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const chatDisabled = previousStatus.includes(order?.status)
 
   const ORDER_STATUS: any = {
     0: t('ORDER_STATUS_PENDING', 'Order status pending'),
@@ -176,12 +178,8 @@ const ChatUI = (props: MessagesParams) => {
       fontSize: 12,
     },
     toolbarStyle: {
-      flexDirection: 'column-reverse',
-      paddingVertical: 15,
-      paddingHorizontal: 30,
-      backgroundColor: theme.colors.white,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.tabBar,
+      padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+      flexDirection: 'column-reverse'
     },
     accessoryIcon: {
       height: 32,
@@ -586,16 +584,12 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   const renderAccessory = () => (
+    !chatDisabled &&
     <View>
       <Header
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
         horizontal
-        // contentContainerStyle={{
-        //   justifyContent:
-        //     orientation === 'Landscape' ? 'center' : 'space-between',
-        //   width: '100%',
-        // }}
         nestedScrollEnabled={true}
       >
         {user?.level !== 2 && (
@@ -766,113 +760,130 @@ const ChatUI = (props: MessagesParams) => {
       containerStyle={styles.toolbarStyle}
       primaryStyle={{ alignItems: 'center', justifyContent: 'space-between' }}
       accessoryStyle={{ position: 'relative', marginBottom: 45 }}
-      renderAccessory={order ? () => renderAccessory && renderAccessory() : undefined}
+      renderAccessory={() => renderAccessory()}
     />
   );
 
   const renderComposer = (props: any) => (
-    <View
-      style={{
-        flexDirection: 'row',
-        height: 44,
-        width: '85%',
-        backgroundColor: theme.colors.composerView,
-        borderRadius: 7.6,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingRight: 10,
-      }}>
-      <Composer
-        {...props}
-        textInputStyle={{
-          borderRadius: 7.6,
-          borderColor: theme.colors.transparent,
-          borderWidth: 0,
-          color: '#010300',
-        }}
-        textInputProps={{
-          value: message,
-          onSubmitEditing: onSubmit,
-          returnKeyType: message ? 'send' : 'done',
-          blurOnSubmit: true,
-          multiline: false,
-          numberOfLines: 1,
-          autoCorrect: false,
-          autoCompleteType: 'off',
-          enablesReturnKeyAutomatically: false,
-          selectionColor: theme.colors.primary,
+    chatDisabled ? (
+      <View
+        style={{
+          width: '100%',
+          flexDirection: 'column',
+          alignItems: 'center'
         }}
-        placeholder={t('WRITE_MESSAGE', 'Write message')}
-        placeholderTextColor={theme.colors.composerPlaceHolder}
-      />
-
-      <TouchableOpacity
-        onPress={() => {
-          setImage && setImage(null);
-          setIsShowSignaturePad(!isShowSignaturePad);
-        }}>
+      >
         <MaterialCommunityIcon
-          name="pen"
-          color={
-            isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
-          }
+          name='close-octagon-outline'
           size={24}
         />
-      </TouchableOpacity>
-
-      {!file.type && (
-        <Actions
+        <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
+      </View>
+    ) : (
+      <View
+        style={{
+          flexDirection: 'row',
+          height: 44,
+          width: '85%',
+          backgroundColor: theme.colors.composerView,
+          borderRadius: 7.6,
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingRight: 10,
+        }}>
+        <Composer
           {...props}
-          containerStyle={styles.containerActions}
-          optionTintColor="#222845"
-          icon={() => (
-            <>
-              {!file?.type && (
-                <>
-                  <OIconButton
-                    borderColor={theme.colors.transparent}
-                    icon={
-                      !isShowSignaturePad && image
-                        ? { uri: image }
-                        : theme.images.general.imageChat
-                    }
-                    iconStyle={{
-                      borderRadius: image ? 10 : 0,
-                      width: image ? 32 : 28,
-                      height: image ? 32 : 28,
-                    }}
-                    onClick={handleImagePicker}
-                    iconCover
-                  />
-
-                  {image && !isShowSignaturePad && (
-                    <TouchableOpacity
-                      style={{
-                        position: 'absolute',
-                        top: -5,
-                        right: -5,
-                        borderColor: theme.colors.backgroundDark,
-                        backgroundColor: theme.colors.white,
-                        borderRadius: 25,
-                      }}
-                      onPress={() => removeImage()}>
-                      <MaterialCommunityIcon
-                        name="close-circle-outline"
-                        color={theme.colors.backgroundDark}
-                        size={24}
-                      />
-                    </TouchableOpacity>
-                  )}
-                </>
-              )}
-            </>
-          )}
+          textInputStyle={{
+            borderRadius: 7.6,
+            borderColor: theme.colors.transparent,
+            borderWidth: 0,
+            color: '#010300',
+          }}
+          textInputProps={{
+            value: message,
+            onSubmitEditing: onSubmit,
+            returnKeyType: message ? 'send' : 'done',
+            blurOnSubmit: true,
+            multiline: false,
+            numberOfLines: 1,
+            autoCorrect: false,
+            autoCompleteType: 'off',
+            enablesReturnKeyAutomatically: false,
+            selectionColor: theme.colors.primary,
+          }}
+          placeholder={t('WRITE_MESSAGE', 'Write message')}
+          placeholderTextColor={theme.colors.composerPlaceHolder}
         />
-      )}
-    </View>
+
+        <TouchableOpacity
+          onPress={() => {
+            setImage && setImage(null);
+            setIsShowSignaturePad(!isShowSignaturePad);
+          }}>
+          <MaterialCommunityIcon
+            name="pen"
+            color={
+              isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
+            }
+            size={24}
+          />
+        </TouchableOpacity>
+
+        {!file.type && (
+          <Actions
+            {...props}
+            containerStyle={styles.containerActions}
+            optionTintColor="#222845"
+            icon={() => (
+              <>
+                {!file?.type && (
+                  <>
+                    <OIconButton
+                      borderColor={theme.colors.transparent}
+                      icon={
+                        !isShowSignaturePad && image
+                          ? { uri: image }
+                          : theme.images.general.imageChat
+                      }
+                      iconStyle={{
+                        borderRadius: image ? 10 : 0,
+                        width: image ? 32 : 28,
+                        height: image ? 32 : 28,
+                      }}
+                      onClick={handleImagePicker}
+                      iconCover
+                    />
+
+                    {image && !isShowSignaturePad && (
+                      <TouchableOpacity
+                        style={{
+                          position: 'absolute',
+                          top: -5,
+                          right: -5,
+                          borderColor: theme.colors.backgroundDark,
+                          backgroundColor: theme.colors.white,
+                          borderRadius: 25,
+                        }}
+                        onPress={() => removeImage()}>
+                        <MaterialCommunityIcon
+                          name="close-circle-outline"
+                          color={theme.colors.backgroundDark}
+                          size={24}
+                        />
+                      </TouchableOpacity>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          />
+        )}
+      </View>
+    )
   );
 
   const renderSend = (props: any) => (
+    !chatDisabled &&
     <Send
       {...props}
       disabled={

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

@@ -44,7 +44,7 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification);
+  const notificationSound = new Sound(theme.sounds.notification, '', () => { });
 
   let _timeout: any = null
 
@@ -74,11 +74,11 @@ const NewOrderNotificationUI = (props: any) => {
         await fetch(`${ordering.root}/users/${user.id}/locations`, {
           method: 'POST',
           body: JSON.stringify({
-            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+            location: JSON.stringify({ location: `{lat: ${location.latitude}, lng: ${location.longitude}}` })
           }),
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
         })
-      } catch {}
+      } catch { }
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
       if (assignedSecondsDiff < 5 && !isBusinessApp) {
@@ -88,7 +88,7 @@ const NewOrderNotificationUI = (props: any) => {
     if (evtType === 3 || value.author_id === user.id) return
     handlePlayNotificationSound({
       evt: evtType,
-      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+      orderId: value?.order_id
     })
   }
 

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

@@ -16,6 +16,8 @@ import {
 	useToast,
 	ToastType
 } from 'ordering-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
 import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
@@ -38,6 +40,8 @@ import {
 import { GPSButton } from '../GPSButton';
 import { ScrollView } from 'react-native-gesture-handler';
 
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const inputNames = [
 	{ name: 'address', code: 'Address' },
 	{ name: 'internal_number', code: 'Internal number' },
@@ -66,6 +70,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 	} = props;
 
 	const theme = useTheme();
+	const [orientationState] = useDeviceOrientation();
+
 	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
@@ -75,6 +81,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		{ icon: theme.images.general.tag_plus, value: 'other' },
 	];
 
+	const HEIGHT_SCREEN = orientationState?.dimensions?.height
+
 	const styles = StyleSheet.create({
 		iconContainer: {
 			display: 'flex',
@@ -524,7 +532,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ height: HEIGHT_SCREEN * .78, overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>

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

@@ -5,7 +5,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, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
@@ -351,13 +351,15 @@ export const BusinessBasicInformation = (
 									{business?.ribbon?.enabled && (
 										<RibbonBox
 											bgColor={business?.ribbon?.color}
+											colorText={lightenDarkenColor(business?.ribbon?.color)}
+											borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 											isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 											isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 										>
 											<OText
 												size={10}
 												weight={'400'}
-												color={theme.colors.white}
+												color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 												numberOfLines={2}
 												ellipsizeMode='tail'
 												lineHeight={13}

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

@@ -64,6 +64,14 @@ export const RibbonBox = styled.View`
   ${(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 SocialListWrapper = styled.ScrollView`

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

@@ -14,7 +14,7 @@ import { OIcon, OText } from '../shared';
 import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 
 import {
 	BusinessHero,
@@ -65,6 +65,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const windowHeight = Dimensions.get('window').height
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
+	const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
+	const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
+	const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden
+	const hideBusinessDistance = theme?.business_listing_view?.components?.business?.components?.distance?.hidden
+	const hideBusinessReviews = theme?.business_listing_view?.components?.business?.components?.reviews?.hidden
+	const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
+	const hideBusinessOffer = theme?.business_listing_view?.components?.business?.components?.offer?.hidden
+	const hideBusinessHeader = theme?.business_listing_view?.components?.business?.components?.header?.hidden
+	const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden
+
 	const textSize = isCustomLayout ? 12 : 10
 	const cardHeight = windowHeight * 0.3
 
@@ -175,13 +185,15 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					{business?.ribbon?.enabled && (
 						<RibbonBox
 							bgColor={business?.ribbon?.color}
+							colorText={lightenDarkenColor(business?.ribbon?.color)}
+							borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 						>
 							<OText
 								size={10}
 								weight={'400'}
-								color={theme.colors.white}
+								color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 								numberOfLines={2}
 								ellipsizeMode='tail'
 								lineHeight={13}
@@ -191,20 +203,22 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
-						<FastImage
-							style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
-							source={(businessHeader || business?.header) ? {
-								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
-								priority: FastImage.priority.normal,
-							} : theme.images.dummies.businessHeader}
-							resizeMode={FastImage.resizeMode.cover}
-						/>
-						{(businessFeatured ?? business?.featured) && (
+						{!hideBusinessHeader && (
+							<FastImage
+								style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
+								source={(businessHeader || business?.header || typeof theme.images.dummies.businessHeader === 'string') ? {
+									uri: optimizeImage(businessHeader || business?.header || theme.images.dummies.businessHeader, 'h_500,c_limit'),
+									priority: FastImage.priority.normal,
+								} : theme.images.dummies.businessHeader}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						)}
+						{(businessFeatured ?? business?.featured) && !hideBusinessFavoriteBadge && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
-						{(!isCustomLayout) && (
+						{(!isCustomLayout) && !hideBusinessOffer && (
 							getBusinessOffer((business?.offers)) &&
 							<OfferBox>
 								<OText
@@ -231,19 +245,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</BusinessHero>
 					<BusinessContent>
 						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
-							<BusinessLogo style={styles.businessLogo}>
-								<FastImage
-									style={{ width: 56, height: 56 }}
-									source={(businessLogo || business?.logo) ? {
-										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
-										priority: FastImage.priority.normal,
-									} : theme.images.dummies.businessLogo}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							</BusinessLogo>
-							{!isCustomLayout && (
+							{!hideBusinessLogo && (
+								<BusinessLogo style={styles.businessLogo}>
+									<FastImage
+										style={{ width: 56, height: 56 }}
+										source={(businessLogo || business?.logo || typeof theme.images.dummies.businessLogo === 'string') ? {
+											uri: optimizeImage(businessLogo || business?.logo || theme.images.dummies.businessLogo, 'h_150,c_limit'),
+											priority: FastImage.priority.normal,
+										} : theme.images.dummies.businessLogo}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</BusinessLogo>
+							)}
+							{!isCustomLayout && (!hideBusinessFavorite || !hideBusinessReviews) && (
 								<ReviewAndFavorite>
-									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
 										<Reviews>
 											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
 											<OText size={10} style={{ lineHeight: 15 }}>
@@ -251,15 +267,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 											</OText>
 										</Reviews>
 									)}
-									<LottieAnimation
-										type='favorite'
-										onClick={handleChangeFavorite}
-										initialValue={business?.favorite ? 0.75 : 0}
-										toValue={business?.favorite ? 0 : 0.75}
-										disableAnimation={!auth}
-										iconProps={{ color: theme.colors.danger5, size: 18 }}
-										isActive={business?.favorite}
-									/>
+									{!hideBusinessFavorite && (
+										<LottieAnimation
+											type='favorite'
+											onClick={handleChangeFavorite}
+											initialValue={business?.favorite ? 0.5 : 0}
+											toValue={business?.favorite ? 0 : 0.5}
+											disableAnimation={!auth}
+											iconProps={{ color: theme.colors.danger5, size: 18 }}
+											isActive={business?.favorite}
+										/>
+									)}
 								</ReviewAndFavorite>
 							)}
 						</BusinessInfo>
@@ -270,9 +288,9 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								weight={'500'}>
 								{business?.name}
 							</OText>
-							{isCustomLayout && (
+							{isCustomLayout && (!hideBusinessFavorite || !hideBusinessReviews) && (
 								<ReviewAndFavorite>
-									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
 										<Reviews>
 											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
 											<OText size={10} style={{ lineHeight: 15 }}>
@@ -280,15 +298,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 											</OText>
 										</Reviews>
 									)}
-									<LottieAnimation
-										type='favorite'
-										onClick={handleChangeFavorite}
-										initialValue={business?.favorite ? 0.75 : 0}
-										toValue={business?.favorite ? 0 : 0.75}
-										disableAnimation={!auth}
-										iconProps={{ color: theme.colors.danger5, size: 18 }}
-										isActive={business?.favorite}
-									/>
+									{!hideBusinessFavorite && (
+										<LottieAnimation
+											type='favorite'
+											onClick={handleChangeFavorite}
+											initialValue={business?.favorite ? 0.5 : 0}
+											toValue={business?.favorite ? 0 : 0.5}
+											disableAnimation={!auth}
+											iconProps={{ color: theme.colors.danger5, size: 18 }}
+											isActive={business?.favorite}
+										/>
+									)}
 								</ReviewAndFavorite>
 							)}
 						</View>
@@ -304,17 +324,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</View>
 							) : (
 								<View style={styles.bullet}>
-									{orderState?.options?.type === 1 && (
+									{orderState?.options?.type === 1 && !hideBusinessFee && (
 										<OText size={textSize} color={theme.colors.textSecondary}>
 											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 										</OText>
 									)}
-									<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-										orderState?.options?.type === 1
-											? (businessDeliveryTime ?? business?.delivery_time)
-											: (businessPickupTime ?? business?.pickup_time),
-									)} \u2022 `}</OText>
-									<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									{!hideBusinessTime && (
+										<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+											orderState?.options?.type === 1
+												? (businessDeliveryTime ?? business?.delivery_time)
+												: (businessPickupTime ?? business?.pickup_time),
+										)} \u2022 `}</OText>
+									)}
+									{!hideBusinessDistance && (
+										<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									)}
 								</View>
 							)}
 						</Metadata>

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

@@ -72,6 +72,14 @@ export const RibbonBox = styled.View`
   ${(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 OfferBox = styled.View`

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

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -101,13 +101,15 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			{business?.ribbon?.enabled && (
 				<RibbonBox
 					bgColor={business?.ribbon?.color}
+					colorText={lightenDarkenColor(business?.ribbon?.color)}
+					borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 				>
 					<OText
 						size={10}
 						weight={'400'}
-						color={theme.colors.white}
+						color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 						numberOfLines={2}
 						ellipsizeMode='tail'
 						lineHeight={13}

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

@@ -70,4 +70,12 @@ export const RibbonBox = styled.View`
   ${(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'};
+  `}
 `

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';
@@ -186,13 +186,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {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}

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

@@ -27,6 +27,14 @@ export const RibbonBox = styled.View`
   ${(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`

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration, BackHandler } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -343,6 +343,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [business?.lazy_load_products_recommended, selectedCategoryId, categorySelected?.id, viewedCategory])
 
+  useEffect(() => {
+    const handleArrowBack: any = () => {
+      navigation.goBack()
+      return true
+    }
+    BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+    }
+  }, [])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>

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

@@ -171,7 +171,7 @@ const MessagesUI = (props: MessagesParams) => {
 					image: message.source,
 					system: message.type === 1,
 					user: {
-						_id: message.author && message.author.id ,
+						_id: message.author && message.author.id,
 						name: message.author && message.author.name,
 						avatar: message.author && (message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo)
 					}
@@ -242,6 +242,7 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const renderAccessory = () => {
 		return (
+			!chatDisabled &&
 			<QuickMessageContainer
 				style={{
 					marginLeft: 10,

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

@@ -44,7 +44,7 @@ const PageBannerUI = (props: any) => {
   })
 
   const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
+		navigation.push(route, params)
 	}
 
   const handleGoToPage = (item: any) => {

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

@@ -143,7 +143,7 @@ const PromotionsUI = (props: PromotionParams) => {
             <WrapperSingleOffer key={offer.id}>
               <SingleOfferContainer>
                 <FastImage
-                  style={{ height: 80, width: 80, aspectRatio: 3 / 2, borderRadius: 8 }}
+                  style={{ height: 80, width: 80, aspectRatio: 1, borderRadius: 8 }}
                   source={typeof offer?.image !== 'number' ? {
                     uri: optimizeImage(offer?.image, 'h_1024,c_limit'),
                     priority: FastImage.priority.normal,

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

@@ -9,6 +9,7 @@ export const PromotionsContainer = styled.View`
 export const WrapperSingleOffer = styled.View`
   flex-direction: column;
   width: 100%;
+  margin-bottom: 30px;
 `
 
 export const SingleOfferContainer = styled.View`
@@ -16,11 +17,12 @@ export const SingleOfferContainer = styled.View`
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `
 
 export const OfferInformation = styled.View`
   justify-content: space-between;
+  min-width: 70%;
   max-width: 70%;
 `
 

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

@@ -17,7 +17,7 @@ import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
-import { shape } from '../../utils';
+import { lightenDarkenColor, shape } from '../../utils';
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation'
 
@@ -109,7 +109,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		},
 		productTagsStyle: {
 			width: 30,
-    		height: 30,
+			height: 30,
 			marginRight: 5
 		}
 	});
@@ -222,7 +222,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 										showsHorizontalScrollIndicator={false}
 										horizontal
 										style={{ marginLeft: 10 }}
-										contentContainerStyle={{flexGrow: 1}}
+										contentContainerStyle={{ flexGrow: 1 }}
 									>
 										{product?.tags.map((tag: any, i: any) => (
 											<TouchableWithoutFeedback key={i}>
@@ -266,13 +266,15 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
+									colorText={lightenDarkenColor(product?.ribbon?.color)}
+									borderRibbon={lightenDarkenColor(product?.ribbon?.color)}
 									isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
 									isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
 								>
 									<OText
 										size={textSize}
 										weight={'400'}
-										color={theme.colors.white}
+										color={lightenDarkenColor(product?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 										numberOfLines={2}
 										ellipsizeMode='tail'
 										lineHeight={13}

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

@@ -18,7 +18,7 @@ export const QuantityContainer = styled.View`
   background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
-  ${({businessSingleId} : any) => businessSingleId ? css`
+  ${({ businessSingleId }: any) => businessSingleId ? css`
     left: 0;
   ` : css`
     right: 0;
@@ -63,4 +63,12 @@ export const RibbonBox = styled.View`
   ${(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'};
+  `}
 `

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

@@ -564,8 +564,46 @@ export const getOrderStatus = (s: string) => {
       image: theme.images.order.status8
     }
   ];
-  
+
   const objectStatus = orderStatus.find((o) => o.key === status);
 
   return objectStatus && objectStatus;
 }
+
+/**
+ * Function to get brightness of color.
+ */
+export const lightenDarkenColor = (color: any) => {
+
+  let r, g, b, hsp
+  if (!color) return
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/)
+
+    r = color[1]
+    g = color[2]
+    b = color[3]
+  } else {
+    // If RGB --> Convert it to HEX
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'))
+
+    r = color >> 16
+    g = color >> 8 & 255
+    b = color & 255
+  }
+
+  // HSP (Highly Sensitive Poo) equation
+  hsp = Math.sqrt(
+    0.299 * (r * r) +
+    0.587 * (g * g) +
+    0.114 * (b * b)
+  )
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 197) {
+    return true //is light color
+  } else {
+    return false
+  }
+}