ordering-ui-react-native 0.12.14 → 0.12.18

package/themes/business/src/components 2/MessagesOption/styles.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components/native';
+
+export const FiltersTab = styled.View`
+  margin-bottom: 20px;
+`;
+
+export const TabsContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  border-bottom-color: #e9ecef;
+`;
+
+export const TagsContainer = styled.ScrollView`
+  margin-bottom: 10px;
+`;
+
+export const Tag = styled.Pressable`
+  background-color: ${({ isSelected }: { isSelected: string }) => isSelected};
+  justify-content: center;
+  align-items: center;
+  min-height: 34px;
+  padding: 4px 10px;
+  border-radius: 50px;
+  margin-right: 15px;
+`;

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

@@ -0,0 +1,167 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useEvent, useLanguage, useUtils, useSession, useApi } from 'ordering-components/native'
+import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
+import { OText, OIcon } from '../shared'
+import { useTheme } from 'styled-components/native'
+import Icon from 'react-native-vector-icons/Feather'
+import { NotificationContainer } from './styles'
+import Sound from 'react-native-sound'
+import moment from 'moment'
+import { useLocation } from '../../hooks/useLocation'
+Sound.setCategory('Playback')
+
+const windowWidth = Dimensions.get('screen').width
+
+export const NewOrderNotification = (props: any) => {
+  const [events] = useEvent()
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ user, token }] = useSession()
+  const [ordering] = useApi()
+  const [{ getTimeAgo }] = useUtils()
+  const { getCurrentLocation } = useLocation();
+  const [modalOpen, setModalOpen] = useState(false)
+  const [newOrderId, setNewOrderId] = useState(null)
+  const [soundTimeout, setSoundTimeout] = useState<any>(null)
+
+  const notificationSound = new Sound(theme.sounds.notification, error => {
+    if (error) {
+      console.log('failed to load the sound', error);
+      return
+    }
+    console.log('loaded successfully');
+  });
+
+
+  const handlePlayNotificationSound = () => {
+    let times = 0
+    const _timeout = setInterval(function () {
+      notificationSound.play(success => {
+        if (success) {
+          console.log('successfully finished playing');
+          times = times + 1
+        } else {
+          console.log('playback failed due to audio decoding errors');
+        }
+      })
+      setSoundTimeout(_timeout)
+      if (times === 3) {
+        clearInterval(_timeout)
+        clearInterval(soundTimeout)
+      }
+    }, 2500)
+  }
+
+  const handleCloseModal = () => {
+    clearInterval(soundTimeout)
+    setModalOpen(false)
+  }
+
+  const handleNotification = useCallback((order: any) => {
+    clearInterval(soundTimeout)
+    handlePlayNotificationSound()
+    setNewOrderId(order.id)
+    setModalOpen(true)
+  }, [newOrderId, notificationSound, soundTimeout])
+
+  useEffect(() => {
+    events.on('order_added', handleNotification)
+    return () => {
+      events.off('order_added', handleNotification)
+    }
+  }, [handleNotification])
+
+  const handleUpdateOrder = useCallback(async (order: any) => {
+    if (order?.driver) {
+      const location = await getCurrentLocation()
+      await fetch(`${ordering.root}/users/${user.id}/locations`, {
+        method: 'POST',
+        body: JSON.stringify({
+          location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+        }),
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+      })
+      const assignedTimeDiff = moment.utc(order?.driver?.last_order_assigned_at).local().fromNow()
+      if (assignedTimeDiff === 'a few seconds ago') {
+        clearInterval(soundTimeout)
+        handlePlayNotificationSound()
+        setNewOrderId(order.id)
+        setModalOpen(true)
+      }
+    }
+  }, [newOrderId, notificationSound, soundTimeout])
+
+  useEffect(() => {
+    if (user?.level !== 4) return
+    events.on('order_updated', handleUpdateOrder)
+    return () => {
+      events.off('order_updated', handleUpdateOrder)
+    }
+  }, [handleUpdateOrder, user])
+
+  useEffect(() => {
+    notificationSound.setVolume(1);
+    return () => {
+      notificationSound.release();
+    }
+  }, [])
+
+  return (
+    <>
+      <Modal
+        animationType='slide'
+        transparent={true}
+        visible={modalOpen}
+      >
+        <NotificationContainer>
+          <View style={styles.modalView}>
+            <TouchableOpacity
+              style={styles.wrapperIcon}
+              onPress={() => handleCloseModal()}
+            >
+              <Icon
+                name="x"
+                size={30}
+              />
+            </TouchableOpacity>
+            <OText
+              size={18}
+              color={theme.colors.textGray}
+              weight={600}
+            >
+              {t('NEW_ORDRES_RECEIVED', 'New orders have been received!')}
+            </OText>
+            <OIcon
+              src={theme.images.general.newOrder}
+              width={250}
+              height={200}
+            />
+            <OText
+              color={theme.colors.textGray}
+              mBottom={15}
+            >
+              {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
+            </OText>
+          </View>
+        </NotificationContainer>
+      </Modal>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  modalView: {
+    backgroundColor: '#FFF',
+    alignItems: 'center',
+    borderRadius: 8,
+    paddingHorizontal: 20,
+    paddingTop: 65,
+    paddingBottom: 20,
+    maxWidth: windowWidth - 60,
+  },
+  wrapperIcon: {
+    position: 'absolute',
+    right: 20,
+    top: 20
+  }
+})

package/themes/business/src/components 2/NewOrderNotification/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+
+export const NotificationContainer = styled.SafeAreaView`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.4);
+`

package/themes/business/src/components 2/NotFoundSource/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View } from 'react-native';
+import { OButton, OIcon, OText } from '../shared';
+import { NotFoundSourceParams } from '../../types';
+import { useTheme } from 'styled-components/native';
+import { NotFound, NotFoundImage } from './styles';
+
+export const NotFoundSource = (props: NotFoundSourceParams) => {
+  const { image, content, btnTitle, conditioned, onClickButton } = props;
+  const theme = useTheme();
+
+  const errorImage = image || theme.images.general.notFound;
+
+  return (
+    <NotFound>
+      {errorImage && (
+        <NotFoundImage>
+          <OIcon src={errorImage} width={260} height={220} />
+        </NotFoundImage>
+      )}
+      {content && conditioned && !errorImage && (
+        <OText
+          color={theme.colors.textSecondary}
+          size={18}
+          style={{ textAlign: 'center' }}>
+          {content}
+        </OText>
+      )}
+      {content && !conditioned && (
+        <OText
+          color={theme.colors.textSecondary}
+          size={18}
+          style={{ textAlign: 'center' }}>
+          {content}
+        </OText>
+      )}
+      {!onClickButton && props.children && props.children}
+      {onClickButton && (
+        <View style={{ marginTop: 10, width: '100%' }}>
+          <OButton
+            style={{ width: '100%', height: 50, borderRadius: 7.6 }}
+            bgColor={theme.colors.primary}
+            borderColor={theme.colors.primary}
+            onClick={() => onClickButton()}
+            text={btnTitle}
+            textStyle={{ color: theme.colors.white }}
+          />
+        </View>
+      )}
+    </NotFound>
+  );
+};

package/themes/business/src/components 2/NotFoundSource/styles.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components/native';
+
+export const NotFound = styled.View`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  margin: 30px auto;
+  padding: 10px;
+  background-color: #f7f7f7;
+`;
+
+export const NotFoundImage = styled.View`
+  max-width: 300px;
+`;