ordering-ui-react-native 0.17.12 → 0.17.13-release

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

@@ -0,0 +1,144 @@
+import React, { useEffect } from 'react'
+import {
+	UserFormDetails as NotificationsController,
+	useLanguage,
+	useSession,
+	useOrderingTheme,
+	useToast,
+	ToastType,
+} from 'ordering-components/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 NavBar from '../NavBar'
+import { OText } from '../shared'
+
+const NotificationsUI = (props: any) => {
+	const {
+		navigation,
+		singleNotifications,
+		handleChangePromotions,
+		userData
+	} = props
+
+	const theme = useTheme();
+	const [{ user: userSession }] = useSession()
+	const [, t] = useLanguage();
+	const [, { showToast }] = useToast();
+	const [orderingTheme] = useOrderingTheme()
+
+	const user = userData || userSession
+
+	const [notificationsList, setNotificationsList] = useState({
+		email: singleNotifications?.result?.result
+			? !!singleNotifications?.result?.result?.settings?.email?.newsletter
+			: !!(singleNotifications?.changes?.settings?.email?.newsletter ?? (user && user?.settings?.email?.newsletter)),
+		sms: singleNotifications?.result?.result
+			? !!singleNotifications?.result?.result?.settings?.sms?.newsletter
+			: !!(singleNotifications?.changes?.settings?.sms?.newsletter ?? (user && user?.settings?.sms?.newsletter)),
+		notification: singleNotifications?.result?.result
+			? !!singleNotifications?.result?.result?.settings?.notification?.newsletter
+			: !!(singleNotifications?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))
+	})
+
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+	const showCustomerPromotions = !orderingTheme?.theme?.profile?.components?.promotions?.hidden
+	const showNotifications = !orderingTheme?.theme?.profile?.components?.notification_settings?.hidden
+
+	const handleEditNotifications = (key: any, value: any) => {
+		setNotificationsList({
+			...notificationsList,
+			[key]: value
+		})
+	}
+
+	useEffect(() => {
+		if (singleNotifications.result.result && !singleNotifications.loading) {
+			if (!singleNotifications.result?.error) {
+				showToast(ToastType.Success, t('UPDATE_SUCCESSFULLY', 'Update successfully'));
+			}
+		}
+	}, [singleNotifications.result])
+
+	useEffect(() => {
+		const isSingle = true
+		handleChangePromotions(notificationsList, isSingle)
+	}, [notificationsList])
+
+	return (
+		<Container>
+			<NavBar
+				title={t('NOTIFICATIONS', 'Notifications')}
+				titleAlign={'center'}
+				onActionLeft={goToBack}
+				showCall={false}
+				style={{
+					paddingHorizontal: 40,
+					paddingVertical: 0,
+				}}
+			/>
+			{showCustomerPromotions && showNotifications && (
+				<>
+					<Spinner visible={singleNotifications?.loading} />
+					<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>
+	)
+}
+
+const styles = StyleSheet.create({
+	title: {
+		marginBottom: 24,
+		fontWeight: 'bold',
+	}
+});
+
+export const NotificationsList = (props: any) => {
+	const notificationsListProps = {
+		...props,
+		UIComponent: NotificationsUI
+	}
+	return <NotificationsController {...notificationsListProps} />
+}

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components/native'
+
+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`
+  flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+`

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

@@ -0,0 +1,61 @@
+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 {
+      _estimatedTime = moment.utc(_delivery).add(order?.eta_time, 'minutes')
+    }
+    if (order?.delivered_in) { _estimatedTime = moment.utc(_delivery).add(order?.delivered_in, '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,18 @@ export const OrderHistory = (props: any) => {
               <OText
                 size={14}
                 weight='bold'
-                numberOfLines={1}
+                numberOfLines={message.change?.attribute === 'delivered_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))}
+                    </>
+                  )
+                    : t(ORDER_STATUS[parseInt(message.change.new, 10)])
                 }
               </OText>
             ) : (