ordering-ui-react-native 0.18.10 → 0.18.12

package/package.json

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

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

@@ -7,13 +7,14 @@ import {
   View,
   KeyboardAvoidingView,
   TextInput,
-  StyleSheet
+  StyleSheet,
+  TouchableOpacity
 } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { useLanguage } from 'ordering-components/native';
 import { Content, Timer, TimeField, Header, Comments, CommentsButtonGroup, TopActions } from './styles';
-import { OText, OButton, OTextarea, OIconButton } from '../shared';
+import { OText, OButton, OTextarea, OIcon } from '../shared';
 import { AcceptOrRejectOrderParams } from '../../types';
 
 import { orderCommentList } from '../../../../../src/utils'
@@ -95,7 +96,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     upper: {
       flex: 1,
       zIndex: 1001,
-      paddingTop: isPage ? 30 : 50,
+      paddingTop: isPage ? 30 : 40,
       marginBottom: 10,
       backgroundColor: theme.colors.backgroundPage
     },
@@ -109,7 +110,18 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     bottom: {
       textAlignVertical: "center",
       textAlign: "center",
-    }
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
   })
 
   const handleFocus = () => {
@@ -299,18 +311,9 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
       <View style={styles.parent}>
         <View style={styles.upper}>
           <TopActions>
-            <OIconButton
-              icon={theme.images.general.arrow_left}
-              borderColor={theme.colors.clear}
-              iconStyle={{ width: 20, height: 20 }}
-              style={{
-                maxWidth: 40,
-                height: 35,
-                justifyContent: 'flex-end',
-                marginBottom: 10,
-              }}
-              onClick={() => handleArrowBack()}
-            />
+            <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+              <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+            </TouchableOpacity>
             <OText
               size={20}
               color={theme.colors.textGray}
@@ -518,7 +521,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             imgRightSrc={null}
             style={{ borderRadius: 7, height: 45 }}
             parentStyle={{ width: '100%' }}
-            textStyle={{color: '#FFF', fontSize: 18 }}
+            textStyle={{ color: '#FFF', fontSize: 18 }}
             isDisabled={!rejectReason && showTextArea}
             onClick={() => handleAcceptOrReject()}
           />

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

@@ -54,12 +54,12 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     };
 
     const handleRejectLogisticOrder = (order: any) => {
-        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id)
+        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id, order)
         handleArrowBack()
     }
 
     const handleAcceptLogisticOrder = (order: any) => {
-        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id)
+        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id, order)
         handleArrowBack()
     }
 

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

@@ -346,7 +346,7 @@ export const getOrderStatus = (s: string, t: any) => {
   return objectStatus && objectStatus;
 };
 
-export const transformDistance = (value : number, distanceUnit?: string) => {
+export const transformDistance = (value: number, distanceUnit?: string) => {
   return distanceUnit === 'mi'
     ? (value / 1.609).toFixed(2)
     : distanceUnit === 'ft'
@@ -354,7 +354,7 @@ export const transformDistance = (value : number, distanceUnit?: string) => {
       : (value).toFixed(2)
 }
 
-export const formatSeconds = (seconds : number) => {
+export const formatSeconds = (seconds: number) => {
   // Hours, minutes and seconds
   const hrs = Math.floor(seconds / 3600)
   const mins = Math.floor((seconds % 3600) / 60)
@@ -377,8 +377,8 @@ export const calculateDistance = (
   const lat1 = pointA.lat;
   const lon1 = pointA.lng;
 
-  const lat2 = pointB.latitude;
-  const lon2 = pointB.longitude;
+  const lat2 = pointB?.latitude;
+  const lon2 = pointB?.longitude;
 
   const R = 6371e3;
   const φ1 = lat1 * (Math.PI / 180);

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

@@ -285,8 +285,8 @@ export const BusinessBasicInformation = (
 							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
 					}
 					{...(!loading && {
-						source: (header || businessState?.business?.header) ? {
-							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header
+						source: (header || businessState?.business?.header || typeof theme?.images?.dummies?.businessHeader === 'string') ? {
+							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header || theme?.images?.dummies?.businessHeader
 						} : theme?.images?.dummies?.businessHeader
 					})}
 					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
@@ -317,11 +317,11 @@ export const BusinessBasicInformation = (
 				{!hideLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
-							logo || businessState?.business?.logo ?
+							logo || businessState?.business?.logo || typeof theme.images.dummies.businessLogo === 'string' ?
 								<FastImage
 									style={styles.logoStyle}
 									source={{
-										uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit'),
+										uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit') || theme.images.dummies.businessLogo,
 										priority: FastImage.priority.high,
 										cache: FastImage.cacheControl.web
 									}}

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

@@ -204,10 +204,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						{!hideBusinessHeader && (
 							<FastImage
 								style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
-								source={(businessHeader || business?.header) ? {
-									uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
+								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}
+								} : theme.images.dummies.businessHeader}								
 								resizeMode={FastImage.resizeMode.cover}
 							/>
 						)}
@@ -247,8 +247,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								<BusinessLogo style={styles.businessLogo}>
 									<FastImage
 										style={{ width: 56, height: 56 }}
-										source={(businessLogo || business?.logo) ? {
-											uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+										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}

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

@@ -29,6 +29,12 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
 
+	const hideLocation = theme?.business_view?.components?.information?.components?.location?.hidden
+	const hideSchedule = theme?.business_view?.components?.information?.components?.schedule?.hidden
+	const hideVideos = theme?.business_view?.components?.information?.components?.videos?.hidden
+	const hideImages = theme?.business_view?.components?.information?.components?.images?.hidden
+	const hideAddress = theme?.business_view?.components?.information?.components?.address?.hidden
+
 	const scheduleFormatted = ({
 		hour,
 		minute,
@@ -78,87 +84,108 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 					<OText size={24} weight={'600'}>
 						{businessState?.business?.name}
 					</OText>
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('BUSINESS_LOCATION', 'Business Location')}
+					{!hideLocation && (
+						<>
+							<GrayBackground>
+								<OText size={16} weight="500">
+									{t('BUSINESS_LOCATION', 'Business Location')}
+								</OText>
+							</GrayBackground>
+							{businessLocation.location && (
+								<WrapBusinessMap style={styles.wrapMapStyle}>
+									<GoogleMap
+										readOnly
+										location={businessLocation.location}
+										markerTitle={businessState?.business?.name}
+									/>
+								</WrapBusinessMap>
+							)}
+						</>
+					)}
+					{!hideAddress && (
+						<OText size={12} mBottom={20}>
+							{businessState?.business?.address}
 						</OText>
-					</GrayBackground>
-					{businessLocation.location && (
-						<WrapBusinessMap style={styles.wrapMapStyle}>
-							<GoogleMap
-								readOnly
-								location={businessLocation.location}
-								markerTitle={businessState?.business?.name}
-							/>
-						</WrapBusinessMap>
 					)}
-					<OText size={12} mBottom={20}>
-						{businessState?.business?.address}
-					</OText>
 					<DivideView />
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('OPENING_TIME', 'Opening Time')}
-						</OText>
-					</GrayBackground>
-					{businessSchedule && businessSchedule?.length > 0 && (
-						<WrapScheduleBlock>
-							{businessSchedule.map((schedule: any, i: number) => (
-								<ScheduleBlock key={i}>
-									<ScheduleAccordion
-										weekIndex={i}
-										scheduleFormatted={scheduleFormatted}
-										schedule={schedule}
-									/>
-								</ScheduleBlock>
-							))}
-						</WrapScheduleBlock>
+					{!hideSchedule && (
+						<>
+							<GrayBackground>
+								<OText size={16} weight="500">
+									{t('OPENING_TIME', 'Opening Time')}
+								</OText>
+							</GrayBackground>
+							{businessSchedule && businessSchedule?.length > 0 && (
+								<WrapScheduleBlock>
+									{businessSchedule.map((schedule: any, i: number) => (
+										<ScheduleBlock key={i}>
+											<ScheduleAccordion
+												weekIndex={i}
+												scheduleFormatted={scheduleFormatted}
+												schedule={schedule}
+											/>
+										</ScheduleBlock>
+									))}
+								</WrapScheduleBlock>
+							)}
+						</>
 					)}
+
 					{/* {businessState?.business?.gallery?.length > 0 && ( */}
+
 					<>
-						{bVideos().length > 0 && (
+						{!hideVideos && (
 							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('VIDEOS', 'Videos')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bVideos().map((v: any) => (
-										<WebView
-											key={`vid_id_${v.id}`}
-											style={{ width: 210, height: 127, borderRadius: 7.6 }}
-											javaScriptEnabled={true}
-											domStorageEnabled={true}
-											source={{
-												html: `
-													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
+								{bVideos().length > 0 && (
+									<>
+										<DivideView />
+										<GrayBackground>
+											<OText size={16} weight="500">
+												{t('VIDEOS', 'Videos')}
+											</OText>
+										</GrayBackground>
+										<MediaWrapper horizontal>
+											{bVideos().map((v: any) => (
+												<WebView
+													key={`vid_id_${v.id}`}
+													style={{ width: 210, height: 127, borderRadius: 7.6 }}
+													javaScriptEnabled={true}
+													domStorageEnabled={true}
+													source={{
+														html: `
+												<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
 												`,
-											}}
-											mediaPlaybackRequiresUserAction={true}
-										/>
-									))}
-								</MediaWrapper>
+													}}
+													mediaPlaybackRequiresUserAction={true}
+												/>
+											))}
+										</MediaWrapper>
+									</>
+								)}
 							</>
 						)}
-						{bImages().length > 0 && (
+
+						{!hideImages && (
 							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('IMAGES', 'Images')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bImages().map((i: any) => (
-										i.file != null &&
-										<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
-											<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
-											{/* <OText size={12} color={colors.red} style={{position: 'absolute'}}>{i.file}</OText> */}
-										</View>
-									))}
-								</MediaWrapper>
+								{bImages().length > 0 && (
+									<>
+										<DivideView />
+										<GrayBackground>
+											<OText size={16} weight="500">
+												{t('IMAGES', 'Images')}
+											</OText>
+										</GrayBackground>
+										<MediaWrapper horizontal>
+											{bImages().map((i: any) => (
+												i.file != null &&
+												<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
+													<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
+													{/* <OText size={12} color={colors.red} style={{position: 'absolute'}}>{i.file}</OText> */}
+												</View>
+											))}
+										</MediaWrapper>
+									</>
+								)}
 							</>
 						)}
 					</>

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

@@ -450,7 +450,7 @@ const MessagesUI = (props: MessagesParams) => {
 										active={business}
 									>
 										<OIcon
-											url={order?.business?.logo}
+											url={order?.business?.logo || theme.images.dummies.businessLogo}
 											width={32}
 											height={32}
 											style={{ borderRadius: 32 }}

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

@@ -280,7 +280,9 @@ const MultiCheckoutUI = (props: any) => {
                     hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
                     onNavigationRedirect={(route: string, params: any) => props.navigation.navigate(route, params)}
                   />
-                  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+                  {openCarts.length > 1 && (
+                    <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+                  )}
                 </React.Fragment>
               ))}
               {!cartGroup?.loading && openCarts.length === 0 && (
@@ -295,7 +297,7 @@ const MultiCheckoutUI = (props: any) => {
                   {t('WARNING_PARTIAL_WALLET_CARTS', 'Important: One or more carts can`t be completed due a partial payment with cash/points wallet and requires to be paid individually')}
                 </OText>
               )}
-              {openCarts.length > 0 && (
+              {openCarts.length > 1 && (
                 <ChCartsTotal>
                   {totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
                     <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>

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

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import { useUtils } from 'ordering-components/native'
+import moment from 'moment'
+
+export const OrderEta = (props: any) => {
+  const {
+    order,
+    outputFormat
+  } = props
+
+  const [{ parseDate }] = useUtils()
+  const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
+
+  const getEstimatedDeliveryTime = () => {
+    let _estimatedTime
+    let totalEta = 0
+    const _delivery = order?.delivery_datetime_utc
+      ? order?.delivery_datetime_utc
+      : order?.delivery_datetime
+    if (order?.eta_current_status_time) {
+      const currentStatueEta = order?.eta_current_status_time
+      totalEta += currentStatueEta
+      let nextStatusTimes = 0
+      if (order?.eta_next_status_times) {
+        Object.keys(order.eta_next_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            nextStatusTimes += order.eta_next_status_times[key]
+          }
+        })
+      }
+
+      totalEta += nextStatusTimes
+
+      const diffTimeAsSeconds = moment.utc(order?.reporting_data?.at[`status:${order.status}`]).add(order?.eta_current_status_time, 'minutes').diff(moment().utc(), 'seconds')
+      const diffTimeAsMinutes = Math.ceil(diffTimeAsSeconds / 60)
+      if (diffTimeAsMinutes <= 0) {
+        totalEta += (Math.floor(Math.abs(diffTimeAsMinutes / order?.eta_current_status_time) + 1) * order?.eta_current_status_penalty_time)
+      }
+      _estimatedTime = parseDate(moment(_delivery).add(totalEta, 'minutes'))
+    } else {
+      _estimatedTime = parseDate(moment(_delivery).add(order?.eta_time, 'minutes'))
+    }
+    setEstimatedDeliveryTime(_estimatedTime)
+  }
+
+  useEffect(() => {
+    getEstimatedDeliveryTime()
+    const interval = setInterval(() => {
+      getEstimatedDeliveryTime()
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [order])
+
+  return (
+    <>
+      {!outputFormat ? estimatedDeliveryTime : moment(estimatedDeliveryTime).format(outputFormat)}
+    </>
+  )
+}

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

@@ -49,6 +49,7 @@ import NavBar from '../NavBar'
 import { OrderHistory } from './OrderHistory';
 import { PlaceSpot } from '../PlaceSpot'
 import { SendGiftCard } from '../GiftCard/SendGiftCard'
+import { OrderEta } from './OrderEta'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -191,7 +192,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         order: {
           id: order?.id,
           business_id: order?.business_id,
-          logo: order.business?.logo,
+          logo: order.business?.logo || theme.images.dummies.businessLogo,
           driver: order?.driver,
           products: order?.products,
           review: order?.review,
@@ -410,13 +411,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               titleWrapStyle={{ paddingHorizontal: 0 }}
               titleStyle={{ marginRight: 0, marginLeft: 0 }}
               subTitle={!hideDeliveryDate && <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                {
-                  activeStatus.includes(order?.status)
-                    ? order?.eta_time + 'min'
-                    : order?.delivery_datetime_utc
-                      ? parseDate(order?.delivery_datetime_utc)
-                      : parseDate(order?.delivery_datetime, { utc: false })
-                }
+                {activeStatus.includes(order?.status) ? (
+                  <OrderEta order={order} />
+                ) : (
+                  parseDate(order?.reporting_data?.at[`status:${order.status}`])
+                )}
               </OText>}
             />
             {enabledPoweredByOrdering && (

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

@@ -12,6 +12,7 @@ import { NotFoundSource } from '../NotFoundSource'
 import { View, StyleSheet, TouchableOpacity, Platform } from 'react-native'
 import { Placeholder, Fade, PlaceholderLine } from "rn-placeholder";
 import FastImage from 'react-native-fast-image'
+import { OrderEta } from '../OrderDetails/OrderEta'
 import {
   ProgressContentWrapper,
   ProgressBar,
@@ -33,7 +34,7 @@ const OrderProgressUI = (props: any) => {
   const theme = useTheme();
 
   const [, t] = useLanguage()
-  const [{ optimizeImage, parseDate, parseTime }] = useUtils()
+  const [{ optimizeImage, parseTime }] = useUtils()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
   const [initialLoaded, setInitialLoaded] = useState(false)
@@ -76,15 +77,6 @@ const OrderProgressUI = (props: any) => {
     }
   });
 
-  const convertDiffToHours = (order: any) => {
-    const minute = order?.eta_time
-    const deliveryTime = order?.delivery_datetime_utc
-      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm' })
-      : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD HH:mm' })
-    const returnedDate = moment(deliveryTime).add(minute, 'minutes').format('hh:mm A')
-    return returnedDate
-  }
-
   const handleGoToOrder = (index: string) => {
     navigation && navigation.navigate(index)
   }
@@ -171,7 +163,7 @@ const OrderProgressUI = (props: any) => {
                       ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
                       : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                     &nbsp;-&nbsp;
-                    {convertDiffToHours(lastOrder)}
+                    <OrderEta order={lastOrder} outputFormat='hh:mm A' />
                   </OText>
                 </TimeWrapper>
               </ProgressTextWrapper>

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

@@ -10,7 +10,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OButton } from '../shared';
 import { SingleOrderCardParams } from '../../types';
 import { OAlert } from '../../../../../src/components/shared'
-
+import { OrderEta } from '../OrderDetails/OrderEta'
 import {
   InnerContainer,
   Logo,
@@ -333,7 +333,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                       {
                         pastOrders
                           ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
-                          : order?.eta_time + 'min'
+                          : <OrderEta order={order} />
                       }
                     </OText>
                   )}

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

@@ -283,8 +283,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							{!hideProductLogo && (
 								<FastImage
 									style={styles.productStyle}
-									source={product?.images ? {
-										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+									source={product?.images || typeof theme?.images?.dummies?.product === 'string' ? {
+										uri: optimizeImage(product?.images || theme?.images?.dummies?.products, 'h_250,c_limit'),
 										priority: FastImage.priority.normal,
 									} : theme?.images?.dummies?.product}
 									resizeMode={FastImage.resizeMode.cover}

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

@@ -28,7 +28,7 @@ const StyledButton = styled.View<Props>`
 	padding-right: 20px;
 	position: relative;
 	${(props : any) => props?.theme?.general?.components?.buttons?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius};
+      border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius}px;
   `}
 `
 const StyledButtonDisabled = styled(StyledButton)`
@@ -119,7 +119,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
+			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: theme?.general?.components?.buttons?.borderRadius || props.style?.borderRadius} : {...props.style, borderRadius: theme?.general?.components?.buttons?.borderRadius || props.style?.borderRadius}}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}