ordering-ui-react-native 0.14.12 → 0.14.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.12",
+  "version": "0.14.16",
   "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,8 +23,10 @@ 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)
+  const [currentChange, setCurrentChange] = useState(1)
 
   const notificationSound = new Sound(theme.sounds.notification, error => {
     if (error) {
@@ -34,7 +36,6 @@ export const NewOrderNotification = (props: any) => {
     console.log('loaded successfully');
   });
 
-
   const handlePlayNotificationSound = () => {
     let times = 0
     const _timeout = setInterval(function () {
@@ -57,19 +58,33 @@ export const NewOrderNotification = (props: any) => {
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
     setModalOpen(false)
+    setNewOrderId(null)
+    setMessageOrderId(null)
   }
 
   const handleNotification = (order: any) => {
     setModalOpen(true)
     clearInterval(soundTimeout)
+    setCurrentChange(1)
     handlePlayNotificationSound()
     setNewOrderId(order.id)
   }
 
+  const handleMessageNotification = (message: any) => {
+    const { order_id: orderId } = message;
+    if (!modalOpen) setModalOpen(true)
+    clearInterval(soundTimeout)
+    setCurrentChange(2)
+    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 +112,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])
 
@@ -142,19 +157,30 @@ export const NewOrderNotification = (props: any) => {
               color={theme.colors.textGray}
               weight={600}
             >
-              {t('NEW_ORDRES_RECEIVED', 'New orders have been received!')}
+              {currentChange === 1 ? t('NEW_ORDRES_RECEIVED', 'New orders have been received!') : t('NEW_MESSAGES_RECEIVED', 'New messages 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>
+            {newOrderId !== null && (
+              <OText
+                color={theme.colors.textGray}
+                mBottom={15}
+              >
+                {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
+              </OText>
+            )}
+
+            {messageOrderId  !== null && (
+              <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 +204,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%'}}

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

@@ -335,7 +335,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             dropdownStyle={{
               borderRadius: 8,
               borderColor: theme.colors.lightGray,
-              marginTop: Platform.OS === 'ios' ? 0 : -15
+              marginTop: Platform.OS === 'ios' ? 0 : -25
             }}
             rowStyle={{
               borderBottomColor: theme.colors.backgroundGray100,

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

@@ -227,7 +227,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 						</PrincipalWrapView>
 
 						{reviewsList?.reviews
-							.filter((review: any) => searchReview !== '' ? review.comment?.toLowerCase()?.includes(searchReview) : true)
+							.filter((review: any) => searchReview !== '' ? review.comment?.toLowerCase()?.includes(searchReview?.toLowerCase()) : true)
 							.map((review: any) => (
 								<ReviewItem
 									key={`review_key_${review.id}`}

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

@@ -266,7 +266,7 @@ const CartUI = (props: any) => {
                         alignItems: 'flex-start',
                         width: '100%',
                         height: 100,
-                        borderColor: theme.colors.textSecondary,
+                        borderColor: theme.colors.border,
                         paddingRight: 50,
                         marginTop: 10,
                         borderRadius: 7.6

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

@@ -203,7 +203,7 @@ const OrderSummaryUI = (props: any) => {
                           alignItems: 'flex-start',
                           width: '100%',
                           height: 100,
-                          borderColor: theme.colors.textSecondary,
+                          borderColor: theme.colors.border,
                           paddingRight: 50,
                           marginTop: 10
                         }}

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

@@ -213,7 +213,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
 					(!product?.valid_menu && isCartProduct && !isCartPending)) && (
 						<View style={{ alignItems: 'flex-end', width: '100%' }}>
-							<OText size={18} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
+							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', bottom: 20 }}>
 								{t('NOT_AVAILABLE', 'Not available')}
 							</OText>
 						</View>