ordering-ui-react-native 0.14.12 → 0.14.13

package/package.json

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

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

@@ -12,7 +12,6 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { OText, OButton } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { PreviousMessages } from '../PreviousMessages';
-// import { Contacts } from '../Contacts';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { useEvent, useLanguage, useUtils, useSession, useApi } from 'ordering-components/native'
+import { useEvent, useLanguage, useUtils, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
 import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
@@ -13,7 +13,7 @@ Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
-export const NewOrderNotification = (props: any) => {
+const NewOrderNotificationUI = (props: any) => {
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -23,6 +23,7 @@ export const NewOrderNotification = (props: any) => {
   const { getCurrentLocation } = useLocation();
   const [modalOpen, setModalOpen] = useState(false)
   const [newOrderId, setNewOrderId] = useState(null)
+  const [messageOrderId, setMessageOrderId] = useState(null)
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
   const [isFocused, setIsFocused] = useState(false)
 
@@ -34,7 +35,6 @@ export const NewOrderNotification = (props: any) => {
     console.log('loaded successfully');
   });
 
-
   const handlePlayNotificationSound = () => {
     let times = 0
     const _timeout = setInterval(function () {
@@ -57,6 +57,8 @@ export const NewOrderNotification = (props: any) => {
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
     setModalOpen(false)
+    setNewOrderId(null)
+    setMessageOrderId(null)
   }
 
   const handleNotification = (order: any) => {
@@ -66,10 +68,20 @@ export const NewOrderNotification = (props: any) => {
     setNewOrderId(order.id)
   }
 
+  const handleMessageNotification = (message: any) => {
+    const { order_id: orderId } = message;
+    if (!modalOpen) setModalOpen(true)
+    clearInterval(soundTimeout)
+    handlePlayNotificationSound()
+    setMessageOrderId(orderId)
+  }
+
   useEffect(() => {
-    events.on('order_added', handleNotification)
+    events.on('order_added_noification', handleNotification)
+    events.on('message_added_noification', handleMessageNotification)
     return () => {
-      events.off('order_added', handleNotification)
+      events.off('order_added_noification', handleNotification)
+      events.off('message_added_noification', handleMessageNotification)
     }
   }, [])
 
@@ -97,9 +109,9 @@ export const NewOrderNotification = (props: any) => {
 
   useEffect(() => {
     if (user?.level !== 4) return
-    events.on('order_updated', handleUpdateOrder)
+    events.on('order_updated_noification', handleUpdateOrder)
     return () => {
-      events.off('order_updated', handleUpdateOrder)
+      events.off('order_updated_noification', handleUpdateOrder)
     }
   }, [handleUpdateOrder, user])
 
@@ -149,12 +161,23 @@ export const NewOrderNotification = (props: any) => {
               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>
+            {newOrderId && (
+              <OText
+                color={theme.colors.textGray}
+                mBottom={15}
+              >
+                {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
+              </OText>
+            )}
+
+            {messageOrderId && (
+              <OText
+                color={theme.colors.textGray}
+                mBottom={15}
+              >
+                {t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', messageOrderId)}
+              </OText>
+            )}
           </View>
         </NotificationContainer>
       </Modal>
@@ -178,3 +201,12 @@ const styles = StyleSheet.create({
     top: 20
   }
 })
+
+export const NewOrderNotification = (props: any) => {
+  const newOrderNotificationProps = {
+    ...props,
+    UIComponent: NewOrderNotificationUI
+  };
+
+  return <NewOrderNotificationController {...newOrderNotificationProps} />;
+};

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

@@ -6,6 +6,7 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import { NewOrderNotification } from '../NewOrderNotification';
 
 import { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
@@ -550,6 +551,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
       {/* </GestureRecognizer> */}
 
+      <NewOrderNotification />
       {openModal && (
         <OModal open={openModal} entireModal customClose>
           <ModalContainer

package/themes/doordash/src/components/BusinessProductsListing/index.tsx

@@ -204,6 +204,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		}
 	}, [])
 
+  useEffect(() => {
+    isKeyboardOpen && Platform.OS === 'android' && cartRef?.current?.scrollToEnd()
+  }, [isKeyboardOpen, cartRef?.current])
+
   return (
     <>
       <Animated.View style={{ flex: 1, backgroundColor: theme.colors.white, position: 'absolute', width: '100%', top: top, zIndex: 1 }}>

package/themes/doordash/src/components/Home/index.tsx

@@ -182,7 +182,7 @@ export const Home = (props: any) => {
 				</TouchableOpacity>
 			</View>
 
-			<OModal entireModal customClose transition={'pageSheet'} open={isAuth} onClose={() => setAuthState(false)} style={{borderRadius: 7.6}}>
+			<OModal overScreen={Platform.OS === 'ios'} entireModal customClose transition={'pageSheet'} open={isAuth} onClose={() => setAuthState(false)} style={{borderRadius: 7.6}}>
 				<View style={styles.authHeader}>
 					<TouchableOpacity onPress={() => setAuthState(false)} style={{}}>
 						<OIcon src={theme.images.general.close} width={16} />

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,7 +410,8 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 }
+                      style: { borderWidth: 0, fontSize: 12 },
+					  maxLength: 10
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/doordash/src/components/Messages/index.tsx

@@ -9,6 +9,8 @@ import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard, I18nManager } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
+import { useWindowDimensions } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 const MessagesUI = (props: MessagesParams) => {
 
@@ -42,6 +44,9 @@ const MessagesUI = (props: MessagesParams) => {
 
   const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
   const [isKeyboardShow, setIsKeyboardShow] = useState(false)
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+	const { height } = useWindowDimensions();
+	const { top, bottom } = useSafeAreaInsets();
 
   const handleClickQuickMessage = (text: string) => {
     setMessage && setMessage(`${message}${text}`)
@@ -186,15 +191,22 @@ const MessagesUI = (props: MessagesParams) => {
   }, [messages.messages.length])
 
   useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
       setIsKeyboardShow(true)
+      setKeyboardHeight(e.endCoordinates.height)
     })
     const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
       setIsKeyboardShow(false)
+      setKeyboardHeight(0)
     })
+    const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', (e) => {
+			setIsKeyboardShow(false)
+      setKeyboardHeight(0)
+		})
     return () => {
       keyboardDidShowListener.remove()
       keyboardDidHideListener.remove()
+      keyboardWillHideListener.remove()
     }
   }, [])
 
@@ -273,7 +285,6 @@ const MessagesUI = (props: MessagesParams) => {
       containerStyle={{
         padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
         flexDirection: 'column-reverse',
-        marginBottom: Platform.OS === 'ios' && isKeyboardShow ? 500 : 0
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
       renderAccessory={() => renderAccessory()}
@@ -362,8 +373,16 @@ const MessagesUI = (props: MessagesParams) => {
     <MaterialCommunityIcon name='chevron-double-down' size={32} />
   )
 
+  const getViewHeight = () => {
+		if (Platform.OS === 'android') {
+			return '100%'
+		} else {
+			return height - top - bottom - (isKeyboardShow ? keyboardHeight - 240 : 48)
+		}
+	}
+
   return (
-    <>
+    <View style={{ height: getViewHeight(), width: '100%', paddingTop: 12, backgroundColor: 'white' }}>
       <Wrapper>
         <Header>
           <OIcon
@@ -396,15 +415,13 @@ const MessagesUI = (props: MessagesParams) => {
           renderBubble={renderBubble}
           renderMessageImage={renderMessageImage}
           scrollToBottomComponent={() => renderScrollToBottomComponent()}
-          messagesContainerStyle={{
-            paddingBottom: 55
-          }}
+
           isLoadingEarlier={messages.loading}
           renderLoading={() => <ActivityIndicator size="small" color="#000" />}
           keyboardShouldPersistTaps='handled'
         />
       </Wrapper>
-    </>
+    </View>
   )
 }
 

package/themes/doordash/src/components/SignupForm/index.tsx

@@ -452,7 +452,8 @@ const SignupFormUI = (props: SignupParams) => {
 											textInputProps={{
 												returnKeyType: 'next',
 												onSubmitEditing: () => passwordRef?.current?.focus?.(),
-												style: { borderWidth: 0, fontSize: 12 }
+												style: { borderWidth: 0, fontSize: 12 },
+												maxLength: 10
 											}}
 											textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
 										/>

package/themes/doordash/src/components/UserFormDetails/index.tsx

@@ -226,7 +226,8 @@ export const UserFormDetailsUI = (props: any) => {
 										defaultValue={phoneUpdate ? '' : user?.cellphone}
 										defaultCode={user?.country_phone_code || null}
 										textInputProps={{
-											style: { borderWidth: 0, fontSize: 12 }
+											style: { borderWidth: 0, fontSize: 12 },
+											maxLength: 10
 										}}
 										textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
 										countryButtonStyle={{ marginStart: -2, justifyContent: 'flex-start', flexBasis: '36%'}}