ordering-ui-react-native 0.12.95 → 0.12.99

package/package.json

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

package/src/components/LoginForm/index.tsx

@@ -418,6 +418,7 @@ const LoginFormUI = (props: LoginParams) => {
         open={isModalVisible}
         onClose={() => setIsModalVisible(false)}
         entireModal
+        title={t('VERIFY_PHONE', 'Verify Phone')}
       >
         <VerifyPhone
           phone={phoneInputData.phone}
@@ -426,6 +427,7 @@ const LoginFormUI = (props: LoginParams) => {
           handleCheckPhoneCode={handleCheckPhoneCode}
           setCheckPhoneCodeState={setCheckPhoneCodeState}
           handleVerifyCodeClick={handleVerifyCodeClick}
+          onClose={() => setIsModalVisible(false)}
         />
       </OModal>
       <Spinner visible={isLoadingSocialButton} />
@@ -440,4 +442,4 @@ export const LoginForm = (props: any) => {
     handleSuccessLogin: () => _removeStoreData('isGuestUser')
   };
   return <LoginFormController {...loginProps} />;
-};
+};

package/src/components/VerifyPhone/index.tsx

@@ -1,5 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, TextInput } from 'react-native';
+import React, { useEffect, useState, useRef } from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  Pressable,
+} from 'react-native';
 import { useLanguage } from 'ordering-components/native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { getTraduction } from '../../utils'
@@ -17,6 +24,7 @@ import {
 import { useTheme } from 'styled-components/native';
 
 const TIME_COUNTDOWN = 60 * 10 // 10 minutes
+const CODE_LENGTH = 4;
 
 export const VerifyPhone = (props: any) => {
   const {
@@ -26,36 +34,91 @@ export const VerifyPhone = (props: any) => {
     checkPhoneCodeState,
     setCheckPhoneCodeState,
     handleCheckPhoneCode,
-    handleVerifyCodeClick
+    handleVerifyCodeClick,
+    onClose
   } = props
 
   const theme = useTheme();
-
-  const styles = StyleSheet.create({
-    inputStyle: {
-      width: 80,
-      height: 80,
-      marginBottom: 25,
-      borderWidth: 1,
-      borderColor: theme.colors.disabled,
+  const [, t] = useLanguage()
+  const ref = useRef<TextInput>(null);
+
+  const style = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inputsContainer: {
+      width: '80%',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    inputContainer: {
+      borderWidth: 2,
       borderRadius: 20,
-      textAlign: 'center',
-      fontSize: 40
-    }
+      padding: 20,
+      borderColor: theme.colors.disabled,
+    },
+    inputContainerFocused: {
+      borderColor: theme.colors.primary,
+    },
+    inputText: {
+      fontSize: 24,
+    },
+    hiddenCodeInput: {
+      position: 'absolute',
+      height: 0,
+      width: 0,
+      opacity: 0,
+    },
   });
 
-  const [, t] = useLanguage()
-
   const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
-  const [verifyCode, setVerifyCode] = useState({ 0: '', 1: '', 2: '', 3: '' })
   const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
-
-  const lastNumbers = phone?.cellphone &&
-    `${phone?.cellphone.charAt(phone?.cellphone.length-2)}${phone?.cellphone.charAt(phone?.cellphone.length-1)}`
-
-  const handleChangeCode = (val: number, i: number) => {
-    setVerifyCode({ ...verifyCode, [i]: val })
-  }
+  const [code, setCode] = useState('');
+  const [containerIsFocused, setContainerIsFocused] = useState(false);
+
+  const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
+  const phoneLength = phone?.cellphone.split('').length
+  const lastNumbers = phone?.cellphone && phone?.cellphone.split('').fill('*', 0, phoneLength - 2).join('')
+
+  const handleOnPress = () => {
+    setContainerIsFocused(true);
+    ref?.current?.focus();
+  };
+
+  const handleOnBlur = () => {
+    setContainerIsFocused(false);
+  };
+
+  const toDigitInput = (_value: number, idx: number) => {
+    const emptyInputChar = '0';
+    const digit = code[idx] || emptyInputChar;
+
+    const isCurrentDigit = idx === code.length;
+    const isLastDigit = idx === CODE_LENGTH - 1;
+    const isCodeFull = code.length === CODE_LENGTH;
+
+    const isFocused = isCurrentDigit || (isLastDigit && isCodeFull);
+
+    const containerStyle =
+      containerIsFocused && isFocused
+        ? {...style.inputContainer, ...style.inputContainerFocused}
+        : style.inputContainer;
+
+    return (
+      <View key={idx} style={containerStyle}>
+        <Text
+          style={{
+            ...style.inputText,
+            color: code[idx] ? theme.colors.black : theme.colors.disabled
+          }}
+        >
+          {digit}
+        </Text>
+      </View>
+    );
+  };
 
   const checkResult = (result: any) => {
     if (!result) return
@@ -106,27 +169,28 @@ export const VerifyPhone = (props: any) => {
   }, [isSendCodeAgain])
 
   useEffect(() => {
-    const codes = Object.keys(verifyCode).length
-    const isFullInputs = codes && Object.values(verifyCode).every(val => val)
-    if (codes === 4 && isFullInputs) {
+    if (code.length === CODE_LENGTH) {
       const values = {
         ...formValues,
         cellphone: phone.cellphone,
         country_phone_code: `+${phone.country_phone_code}`,
-        code: Object.values(verifyCode).join().replace(/,/g, '')
+        code
       }
       handleCheckPhoneCode && handleCheckPhoneCode(values)
     }
-  }, [verifyCode])
+  }, [code]);
+
+  useEffect(() => {
+    if (verifyPhoneState?.result?.error) {
+      onClose && onClose()
+    }
+  }, [verifyPhoneState]);
 
   return (
     <Container>
-      <OText size={30} style={{ textAlign: 'left' }}>
-        {t('VERIFY_PHONE', 'Verify Phone')}
-      </OText>
       {lastNumbers && (
-        <OText size={20} color={theme.colors.disabled}>
-          {`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} **${lastNumbers}`}
+        <OText size={18} color={theme.colors.disabled}>
+          {`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} ${lastNumbers}`}
         </OText>
       )}
       <WrappCountdown>
@@ -140,30 +204,34 @@ export const VerifyPhone = (props: any) => {
         </CountDownContainer>
       </WrappCountdown>
       <InputsSection>
-        {[...Array(4),].map((_: any, i: number) => (
+        <SafeAreaView style={style.container}>
+          <Pressable style={style.inputsContainer} onPress={handleOnPress} disabled={code.length === CODE_LENGTH}>
+            {codeDigitsArray.map(toDigitInput)}
+          </Pressable>
           <TextInput
-            key={i}
-            keyboardType='number-pad'
-            placeholder={'0'}
-            style={styles.inputStyle}
-            onChangeText={(val: any) => handleChangeCode(val, i)}
-            maxLength={1}
-            editable={timer !== '00:00'}
+            ref={ref}
+            value={code}
+            placeholder='0'
+            onChangeText={setCode}
+            onSubmitEditing={handleOnBlur}
+            keyboardType="number-pad"
+            returnKeyType="done"
+            textContentType="oneTimeCode"
+            maxLength={CODE_LENGTH}
+            style={style.hiddenCodeInput}
           />
-        ))}
+        </SafeAreaView>
       </InputsSection>
-      {(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState) &&
-        !(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState)?.loading &&
-        (verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState)?.result?.error &&
-        (verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState).result?.result &&
+      {checkPhoneCodeState &&
+        !checkPhoneCodeState?.loading &&
+        checkPhoneCodeState?.result?.error &&
+        checkPhoneCodeState?.result?.result &&
       (
         <ErrorSection>
-          {checkResult((
-            verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState
-          ).result?.result)?.map((e: any, i: number) => (
+          {checkResult((checkPhoneCodeState).result?.result)?.map((e: any, i: number) => (
             <OText
               key={i}
-              size={20}
+              size={16}
               color={theme.colors.error}
             >
               {`* ${getTraduction(e, t)}`}

package/src/components/VerifyPhone/styles.tsx

@@ -2,9 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding-top: 5px;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -14,24 +12,26 @@ export const CountDownContainer = styled.View`
   margin: 0 auto;
   display: flex;
   justify-content: center;
+  align-items: center;
+  width: 80%;
 `
 
 export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin-bottom: 30px;
 `
 
 export const WrappCountdown = styled.View`
-  padding-top: 20px;
   padding-bottom: 20px;
+  padding-top: 20px;
 `
 
 export const InputsSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  padding-bottom: 20px;
 `
 
 export const ErrorSection = styled.View`

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

@@ -2,6 +2,7 @@ import styled from 'styled-components/native';
 
 export const FiltersTab = styled.View`
   margin-bottom: 20px;
+  min-height: 30px;
   max-height: 35px;
   flex: 1;
 `;

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

@@ -81,7 +81,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 dropdownStyle={{
                   borderRadius: 8,
                   borderColor: theme.colors.lightGray,
-                  marginTop: 5,
+                  marginTop: -15,
                   maxHeight: 160
                 }}
                 rowStyle={{

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

@@ -335,7 +335,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             dropdownStyle={{
               borderRadius: 8,
               borderColor: theme.colors.lightGray,
-              marginTop: 5
+              marginTop: -15
             }}
             rowStyle={{
               borderBottomColor: theme.colors.backgroundGray100,

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

@@ -149,6 +149,7 @@ const OrderMessageUI = (props: any) => {
 	} = props;
 	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
 	const [openModalForDriver, setOpenModalForDriver] = useState(false);
+	const [openMessages, setOpenMessages] = useState({ business: false, driver: false });
 	const [unreadAlert, setUnreadAlert] = useState({
 		business: false,
 		driver: false,
@@ -163,6 +164,11 @@ const OrderMessageUI = (props: any) => {
 		setOpenMessges(false)
 	}
 
+	const handleOpenMessages = (data: any) => {
+		setOpenMessages(data)
+		readMessages && readMessages();
+	}
+
 	useEffect(() => {
 		if (messagesReadList?.length) {
 			openModalForBusiness
@@ -184,19 +190,24 @@ const OrderMessageUI = (props: any) => {
 		};
 	}, []);
 
+	useEffect(() => {
+		handleOpenMessages({ driver: false, business: true })
+	}, [])
+
 	return (
 		<>
-			{(order?.business && !order?.driver) && (
-				<Messages
-					orderId={order?.id}
-					messages={messages}
-					order={order}
-					setMessages={setMessages}
-					readMessages={readMessages}
-					isMeesageListing
-					onClose={() => handleClose()}
-				/>
-			)}
+			<Messages
+				orderId={order?.id}
+				messages={messages}
+				order={order}
+				setMessages={setMessages}
+				readMessages={readMessages}
+				business={openMessages.business}
+				driver={openMessages.driver}
+				onMessages={setOpenMessages}
+				isMeesageListing
+				onClose={() => handleClose()}
+			/>
 		</>
 
 	)
@@ -212,7 +223,10 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 10,
 			controlType: 'infinity'
-		}
+		},
+		profileMessages: true,
+		orderBy: 'last_direct_message_at',
+		orderDirection: 'asc'
 	}
 	return <OrderList {...OrderListingProps} />
 }
@@ -258,10 +272,6 @@ export const MessageListing = (props: MessageListingParams) => {
 		}
 	}, [orderListStatus, selectedOrderId])
 
-	useEffect(() => {
-
-	}, [orderListStatus])
-
 	return (
 		<MessageListingWrapper>
 			<NavBar

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

@@ -7,7 +7,7 @@ import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
-import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader } from './styles'
+import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
 import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -21,11 +21,15 @@ const MessagesUI = (props: MessagesParams) => {
 		message,
 		messagesToShow,
 		sendMessage,
+		setCanRead,
 		setMessage,
 		handleSend,
 		setImage,
 		readMessages,
 		onClose,
+		business,
+		driver,
+		onMessages,
 		isMeesageListing
 	} = props
 
@@ -161,18 +165,18 @@ const MessagesUI = (props: MessagesParams) => {
 
 	useEffect(() => {
 		let newMessages: Array<any> = []
-		const console = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
+		const _console = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
 		const firstMessage = {
 			_id: 0,
-			text: console,
+			text: _console,
 			createdAt: order?.created_at,
 			system: true
 		}
+		const newMessage: any = [];
 		messages.messages.map((message: any) => {
-			let newMessage
-			if (message.type !== 0 && (messagesToShow?.messages?.length || (message?.can_see?.includes('2')) || (message?.can_see?.includes('4') && type === USER_TYPE.DRIVER))) {
-				newMessage = {
-					_id: message.id,
+			if (business && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
+				newMessage.push({
+					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
 					createdAt: message.type !== 0 && message.created_at,
 					image: message.source,
@@ -182,15 +186,30 @@ const MessagesUI = (props: MessagesParams) => {
 						name: message.author.name,
 						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
 					}
-				}
+				});
+			}
+
+			if (driver && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('4'))) {
+				newMessage.push({
+					_id: message?.id,
+					text: message.type === 1 ? messageConsole(message) : message.comment,
+					createdAt: message.type !== 0 && message.created_at,
+					image: message.source,
+					system: message.type === 1,
+					user: {
+						_id: message.author.id,
+						name: message.author.name,
+						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
+					}
+				});
 			}
+
 			if (message.type === 0) {
-				newMessage = firstMessage
+				newMessage.push(firstMessage);
 			}
-			newMessages = [...newMessages, newMessage]
 		})
-		setFormattedMessages([...newMessages.reverse()])
-	}, [messages.messages.length])
+		setFormattedMessages(newMessage.reverse())
+	}, [messages.messages.length, business, driver])
 
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
@@ -205,6 +224,11 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		if (business) setCanRead({ business: true, administrator: true, customer: true, driver: false })
+		else if (driver) setCanRead({ business: false, administrator: true, customer: true, driver: true })
+	}, [business, driver])
+
 	const RenderActions = (props: any) => {
 		return (
 			<Actions
@@ -422,23 +446,39 @@ const MessagesUI = (props: MessagesParams) => {
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>
-						<View>
+						<View style={{ ...styles.typeWraper }}>
 							{order.business && (
-								<OIcon
-									url={order?.business?.logo}
-									width={32}
-									height={32}
-									style={{ borderRadius: 7.6 }}
-								/>
+								<TouchableOpacity
+									onPress={() => onMessages({ business: true, driver: false })}
+								>
+									<MessageTypeItem
+										active={business}
+									>
+										<OIcon
+											url={order?.business?.logo}
+											width={32}
+											height={32}
+											style={{ borderRadius: 32 }}
+										/>
+									</MessageTypeItem>
+								</TouchableOpacity>
 							)}
 
 							{order?.driver && (
-								<OIcon
-									url={order?.driver?.photo}
-									width={32}
-									height={32}
-									style={{ borderRadius: 7.6 }}
-								/>
+								<TouchableOpacity
+									onPress={() => onMessages({ business: false, driver: true })}
+								>
+									<MessageTypeItem
+										active={driver}
+									>
+										<OIcon
+											url={order?.driver?.photo}
+											width={32}
+											height={32}
+											style={{ borderRadius: 32 }}
+										/>
+									</MessageTypeItem>
+								</TouchableOpacity>
 							)}
 						</View>
 					</ProfileMessageHeader>
@@ -509,6 +549,11 @@ const styles = StyleSheet.create({
 		overflow: 'hidden',
 		width: 35,
 		marginVertical: 18,
+	},
+	typeWraper: {
+		flexDirection: 'row',
+		height: 45,
+		alignItems: 'center'
 	}
 
 })

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

@@ -1,5 +1,6 @@
 
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
+
 
 export const Wrapper = styled.View`
   flex: 1;
@@ -24,4 +25,18 @@ export const ProfileMessageHeader = styled.View`
   align-items: center;
   padding-bottom: 0px;
   padding-horizontal: 20px;
+`
+export const MessageTypeItem = styled.View`
+  justify-content: center;
+  align-items: center;
+  padding-horizontal: 5px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  margin-right: 5px;
+  border-radius: 7.6px;
+  overflow: hidden;
+  
+  ${({ active }: any) => active && css`
+    background-color: ${(props: any) => props.theme.colors.whiteGray};
+  `}
 `

package/themes/original/src/types/index.tsx

@@ -338,7 +338,11 @@ export interface MessagesParams {
 	setMessages?: () => {},
 	readMessages?: () => {},
 	onClose?: () => void,
-	isMeesageListing?: boolean
+	isMeesageListing?: boolean,
+	setCanRead?: any,
+	business: boolean,
+	driver: boolean,
+	onMessages?: any
 }
 export interface ViewInterface {
 	navigation?: any;