ordering-ui-react-native 0.18.9 → 0.18.11

package/package.json

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

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

@@ -10,7 +10,8 @@ import { OText, OIcon } from '../shared'
 import { NotificationContainer } from './styles'
 import { useLocation } from '../../hooks/useLocation'
 
-Sound.setCategory('Playback')
+Sound.setCategory('Playback', true)
+Sound.setMode('Default')
 
 const windowWidth = Dimensions.get('screen').width
 
@@ -44,9 +45,6 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  Sound.setCategory('Playback', true)
-  Sound.setMode('Default')
-
   const notificationSound = new Sound(theme.sounds.notification, '', () => {});
 
   let _timeout: any = null

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/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/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,
@@ -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/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}