ordering-ui-react-native 0.17.23 → 0.17.24-test

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,64 @@
+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 = null
+    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 = moment.utc(_delivery).add(totalEta, 'minutes')
+    } else {
+      let timesToAdd = 0
+      if (order?.delivered_in) timesToAdd += order?.delivered_in
+      if (order?.prepared_in) timesToAdd += order?.prepared_in
+      const _etaTime = order?.eta_time + timesToAdd
+      _estimatedTime = moment.utc(_delivery).add(_etaTime, 'minutes')
+    }
+    _estimatedTime = outputFormat ? moment(_estimatedTime).local().format(outputFormat) : parseDate(_estimatedTime, { 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>
             ) : (