ordering-ui-react-native 0.17.42 → 0.17.43-release

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

@@ -9,7 +9,6 @@ const TitleWrapper = styled.View`
   padding-horizontal: 10px;
 `
 const TitleTopWrapper = styled.View`
-  flex: 1;
   flex-direction: row;
   align-items: center;
 `
@@ -17,8 +16,10 @@ const TitleTopWrapper = styled.View`
 const btnBackArrow = {
 	borderWidth: 0,
 	backgroundColor: '#FFF',
-	borderColor: '#FFF',
-	shadowColor: '#FFF'
+	borderColor: '#fff',
+	shadowColor: '#FFF',
+	paddingLeft: 30,
+	paddingRight: 30
 }
 
 interface Props {
@@ -42,6 +43,7 @@ interface Props {
 	paddingTop?: number,
 	isVertical?: boolean,
 	noMargin?: any
+	hideArrowLeft?: boolean
 }
 
 const NavBar = (props: Props) => {
@@ -52,8 +54,6 @@ const NavBar = (props: Props) => {
 		background-color: ${theme.colors.white};
 		padding: 10px 20px 20px 0px;
 		flex-direction: row;
-		justify-content: center;
-		align-items: center;
 		position: relative;
 	`
 
@@ -62,18 +62,18 @@ const NavBar = (props: Props) => {
 	}
 	return (
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
-			<OButton
-				imgLeftSrc={props.leftImg}
-				imgLeftStyle={{ width: 18 }}
-				imgRightSrc={null}
-				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
-				onClick={props?.onActionLeft}
-				icon={AntDesignIcon}
-				iconProps={{
-					name: 'arrowleft',
-					size: 26
-				}}
-			/>
+			{!props.hideArrowLeft && (
+				<OButton
+					iconProps={{
+						name: 'arrowleft',
+						size: 26
+					}}
+					icon={AntDesignIcon}
+					imgRightSrc={null}
+					style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
+					onClick={props?.onActionLeft}
+				/>
+			)}
 			<TitleTopWrapper>
 				{props.withIcon
 					? (
@@ -91,7 +91,7 @@ const NavBar = (props: Props) => {
 				}
 				<TitleWrapper style={{ ...{ paddingHorizontal: props.isVertical ? 0 : 10 }, ...props.titleWrapStyle }}>
 					<OText
-						size={24}
+						size={20}
 						lineHeight={36}
 						weight={Platform.OS === 'ios' ? '600' : 'bold'}
 						style={

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

@@ -1,8 +1,9 @@
 import React from 'react'
 import { View } from 'react-native'
-import { OButton, OIcon, OText } from '../shared'
+import { OButton, OText } from '../shared'
 import { NotFoundSourceParams } from '../../types'
 import { useTheme } from 'styled-components/native';
+import Foundation from 'react-native-vector-icons/Foundation'
 import {
 	NotFound,
 	NotFoundImage
@@ -10,34 +11,37 @@ import {
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
 	const {
-		image,
+		hideImage,
 		content,
 		btnTitle,
+		btnStyle,
 		conditioned,
 		onClickButton
 	} = props
 
 	const theme = useTheme();
 
-	const errorImage = image || theme.images.general.notFound
-	const isUrl = typeof errorImage === 'string' && errorImage.includes('http')
-
 	return (
 		<NotFound>
-			{errorImage && (
+			{!hideImage && (
 				<NotFoundImage>
-					<OIcon url={isUrl && errorImage} src={!isUrl && errorImage} width={260} height={220} />
+					<Foundation
+						name='page-search'
+						color={theme.colors.primary}
+						size={60}
+						style={{ marginBottom: 10 }}
+					/>
 				</NotFoundImage>
 			)}
-			{content && conditioned && !errorImage && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
-			{content && !conditioned && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
 			{!onClickButton && props.children && (
 				props.children
 			)}
 			{onClickButton && (
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
-						style={{ width: '100%', height: 50 }}
+						style={{ width: '100%', height: 50, ...btnStyle }}
 						bgColor={theme.colors.primary}
 						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}

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

@@ -7,13 +7,12 @@ import {
 	useToast,
 	ToastType,
 } from 'ordering-components/native'
-import { NotificationsGroupSwitchWrapper, SwitchWrapper } from './styles'
-import { Platform, StyleSheet, View } from 'react-native'
+import { NotificationsGroupSwitchWrapper, SwitchWrapper, Container } from './styles'
+import { StyleSheet, View } from 'react-native'
 import { useState } from 'react'
 import { useTheme } from 'styled-components/native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import ToggleSwitch from 'toggle-switch-react-native'
-import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
 
@@ -70,58 +69,59 @@ const NotificationsUI = (props: any) => {
 	}, [notificationsList])
 
 	return (
-		<Container noPadding>
+		<Container>
 			<NavBar
 				title={t('NOTIFICATIONS', 'Notifications')}
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+				style={{
+					paddingHorizontal: 40,
+					paddingVertical: 0,
+				}}
 			/>
 			{showCustomerPromotions && showNotifications && (
 				<>
 					<Spinner visible={singleNotifications?.loading} />
-					<View style={{ ...styles.pagePadding }}>
-						<NotificationsGroupSwitchWrapper>
-							<OText style={{ ...styles.title }}>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</OText>
-							<SwitchWrapper>
-								<OText>{t('EMAILS', 'Emails')}</OText>
-								<ToggleSwitch
-									isOn={notificationsList?.email}
-									onColor={theme.colors.primary}
-									size="small"
-									disabled={singleNotifications?.loading}
-									offColor={theme.colors.disabled}
-									animationSpeed={400}
-									onToggle={() => handleEditNotifications('email', !notificationsList?.email)}
-								/>
-							</SwitchWrapper>
-							<SwitchWrapper>
-								<OText>{t('SMS', 'Sms')}</OText>
-								<ToggleSwitch
-									isOn={notificationsList?.sms}
-									onColor={theme.colors.primary}
-									size="small"
-									disabled={singleNotifications?.loading}
-									offColor={theme.colors.disabled}
-									animationSpeed={400}
-									onToggle={() => handleEditNotifications('sms', !notificationsList?.sms)}
-								/>
-							</SwitchWrapper>
-							<SwitchWrapper>
-								<OText>{t('PUSH_NOTIFICATIONS', 'Push Notifications')}</OText>
-								<ToggleSwitch
-									isOn={notificationsList?.notification}
-									onColor={theme.colors.primary}
-									size="small"
-									disabled={singleNotifications?.loading}
-									offColor={theme.colors.disabled}
-									animationSpeed={400}
-									onToggle={() => handleEditNotifications('notification', !notificationsList?.notification)}
-								/>
-							</SwitchWrapper>
-						</NotificationsGroupSwitchWrapper>
-					</View>
+					<NotificationsGroupSwitchWrapper>
+						<OText style={{ ...styles.title }}>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</OText>
+						<SwitchWrapper>
+							<OText>{t('EMAILS', 'Emails')}</OText>
+							<ToggleSwitch
+								isOn={notificationsList?.email}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={singleNotifications?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleEditNotifications('email', !notificationsList?.email)}
+							/>
+						</SwitchWrapper>
+						<SwitchWrapper>
+							<OText>{t('SMS', 'Sms')}</OText>
+							<ToggleSwitch
+								isOn={notificationsList?.sms}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={singleNotifications?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleEditNotifications('sms', !notificationsList?.sms)}
+							/>
+						</SwitchWrapper>
+						<SwitchWrapper>
+							<OText>{t('PUSH_NOTIFICATIONS', 'Push Notifications')}</OText>
+							<ToggleSwitch
+								isOn={notificationsList?.notification}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={singleNotifications?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleEditNotifications('notification', !notificationsList?.notification)}
+							/>
+						</SwitchWrapper>
+					</NotificationsGroupSwitchWrapper>
 				</>
 			)}
 		</Container>
@@ -132,10 +132,6 @@ const styles = StyleSheet.create({
 	title: {
 		marginBottom: 24,
 		fontWeight: 'bold',
-	},
-	pagePadding: {
-		paddingLeft: 40,
-		paddingRight: 40
 	}
 });
 

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

@@ -1,12 +1,15 @@
 import styled from 'styled-components/native'
 
-export const ContainerButtons = styled.View`
-    margin-vertical: 50px
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+	  padding: 20px;
 `
 
 export const NotificationsGroupSwitchWrapper = styled.View`
   flex-grow: 1;
   justify-content: space-between;
+	padding: 0 20px;
 `
 
 export const SwitchWrapper = styled.View`
@@ -14,4 +17,4 @@ export const SwitchWrapper = styled.View`
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 12px;
-`
+`

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

@@ -0,0 +1,76 @@
+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 estimatedUtcTime = null
+    let totalEta = 0
+    if (order?.delivered_in) totalEta += order?.delivered_in
+    if (order?.prepared_in) totalEta += order?.prepared_in
+    if (order?.delivery_type === 1 && order?.eta_drive_time) {
+      totalEta += order?.eta_drive_time
+    }
+
+    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 previousStatusTimes = 0
+      if (order?.eta_previous_status_times) {
+        Object.keys(order.eta_previous_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            previousStatusTimes += order.eta_previous_status_times[key]
+          }
+        })
+      }
+      totalEta += previousStatusTimes
+
+      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)
+      }
+    } else {
+      totalEta = order?.eta_time + totalEta
+    }
+    estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
+    const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
+    setEstimatedDeliveryTime(_estimatedTime)
+  }
+
+  useEffect(() => {
+    getEstimatedDeliveryTime()
+    const interval = setInterval(() => {
+      getEstimatedDeliveryTime()
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [order, outputFormat])
+
+  return (
+    <>
+      {estimatedDeliveryTime}
+    </>
+  )
+}

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

@@ -4,6 +4,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 import { useLanguage, useUtils } from 'ordering-components/native'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OText, OButton } from '../shared'
+import { formatSeconds } from '../../utils'
 
 export const OrderHistory = (props: any) => {
   const {
@@ -61,7 +62,7 @@ export const OrderHistory = (props: any) => {
     20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
     21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
     22: 'ORDER_LOOKING_FOR_DRIVER',
-      23: 'ORDER_DRIVER_ON_WAY'
+    23: 'ORDER_DRIVER_ON_WAY'
   }
 
   const getLogisticTagStatus = (status: any) => {
@@ -128,12 +129,23 @@ export const OrderHistory = (props: any) => {
               <OText
                 size={14}
                 weight='bold'
-                numberOfLines={1}
+                numberOfLines={message.change?.attribute.includes(['delivered_in', 'prepared_in']) ? 2 : 1}
                 ellipsizeMode='tail'
               >
                 {message.change?.attribute === 'logistic_status'
                   ? getLogisticTagStatus(parseInt(message.change.new, 10))
-                  : t(ORDER_STATUS[parseInt(message.change.new, 10)])
+                  : message.change?.attribute === 'delivered_in' ? (
+                    <>
+                      {t('TIME_ADDED_BY_DRIVER', 'Time added by driver')}{'\n'}
+                      {formatSeconds(parseInt(message.change.new, 10))}
+                    </>
+                  )
+                    : message.change?.attribute === 'prepared_in' ? (
+                    <>
+                      {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
+                      {formatSeconds(parseInt(message.change.new, 10))}
+                    </>
+                    ) : t(ORDER_STATUS[parseInt(message.change.new, 10)])
                 }
               </OText>
             ) : (