ordering-ui-react-native 0.15.18 → 0.15.19

package/package.json

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

package/themes/original/index.tsx

@@ -25,6 +25,7 @@ import { ReviewProducts } from './src/components/ReviewProducts';
 import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
+import { Messages } from './src/components/Messages';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -93,6 +94,7 @@ export {
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
+  Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,

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

@@ -6,7 +6,7 @@ import { BusinessProductsListParams } from '../../types';
 import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 
@@ -220,7 +220,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         title={openDescription?.name}
         onClose={() => setOpenDescription(null)}
       >
-        <View style={{ padding: 20 }}>
+        <ScrollView style={{ padding: 20 }}>
           {!!openDescription?.image && (
             <OIcon
               url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
@@ -230,7 +230,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             />
           )}
           <OText>{openDescription?.description}</OText>
-        </View>
+        </ScrollView>
       </OModal>
     </ProductsContainer>
   );

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

@@ -63,7 +63,7 @@ const DriverTipsUI = (props: any) => {
 	return (
 		<DTContainer>
 			<DTWrapperTips>
-				{driverTipsOptions.map((option: any, i: number) => (				
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
 						onPress={() => handlerChangeOption(option)}

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

@@ -98,27 +98,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const handleImagePicker = () => {
 		launchImageLibrary({ mediaType: 'photo', maxHeight: 2048, maxWidth: 2048, includeBase64: true }, (response: any) => {
-			if (response.didCancel) {
-				console.log('User cancelled image picker');
-			} else if (response.errorMessage) {
-				console.log('ImagePicker Error: ', response.errorMessage);
+			if (response?.didCancel) {
+				showToast(ToastType.Error, t('IMAGE_CANCELLED', 'User cancelled image picker'));
+			} else if (response?.errorMessage) {
 				showToast(ToastType.Error, response.errorMessage);
 			} else {
-				if (Platform.OS === 'ios') {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+				if (response?.assets?.length > 0) {
+					const image = response?.assets[0]
+					const url = `data:${image.type};base64,${image.base64}`
+					setImage && setImage(url);
 				} else {
-					if (response?.assets?.length > 0) {
-						const image = response?.assets[0]
-						const url = `data:${image.type};base64,${image.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+					showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
 				}
 			}
 		});
@@ -237,7 +227,7 @@ const MessagesUI = (props: MessagesParams) => {
 						{image && (
 							<TouchableOpacity
 								style={{ position: 'absolute', top: -5, right: -5, borderColor: theme.colors.backgroundDark, backgroundColor: theme.colors.white, borderRadius: 25 }}
-								onPress={() => removeImage()}
+								onPress={removeImage}
 							>
 								<MaterialCommunityIcon name='close-circle-outline' color={theme.colors.backgroundDark} size={24} />
 							</TouchableOpacity>
@@ -545,9 +535,15 @@ const styles = StyleSheet.create({
 })
 
 export const Messages = (props: MessagesParams) => {
+	const [allMessages, setAllMessages] = useState(props.messages)
 	const MessagesProps = {
 		...props,
-		UIComponent: MessagesUI
+		UIComponent: MessagesUI,
+		messages: allMessages,
+		setMessages: (values: any) => {
+			props.setMessages && props.setMessages(values)
+			setAllMessages(values)
+		}
 	}
 	return <MessagesController {...MessagesProps} />
 }

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

@@ -1,14 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, BackHandler, KeyboardAvoidingView, Platform, Linking } from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
+import { View, StyleSheet, BackHandler, Platform, Linking } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { Messages } from '../Messages';
 import {
   useLanguage,
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
   useConfig,
-  useSession,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -16,14 +13,10 @@ import {
   Header,
   OrderContent,
   OrderBusiness,
-  Logo,
   OrderData,
   OrderInfo,
-  OrderStatus,
   StaturBar,
-  StatusImage,
   OrderCustomer,
-  CustomerPhoto,
   InfoBlock,
   HeaderInfo,
   Customer,
@@ -31,7 +24,6 @@ import {
   Table,
   OrderBill,
   Total,
-  NavBack,
   Icons,
   OrderDriver,
   Map,
@@ -41,7 +33,6 @@ import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { OrderDetailsParams } from '../../types';
-import { USER_TYPE } from '../../config/constants';
 import { GoogleMap } from '../GoogleMap';
 import { verifyDecimals } from '../../utils';
 import { OSRow } from '../OrderSummary/styles';
@@ -55,7 +46,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     messages,
     setMessages,
     readMessages,
-    messagesReadList,
     isFromCheckout,
     driverLocation,
   } = props;
@@ -92,19 +82,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const [, t] = useLanguage();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
-  const [{ user }] = useSession();
   const [{ configs }] = useConfig();
 
-  const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
-  const [openModalForDriver, setOpenModalForDriver] = useState(false);
   const [isReviewed, setIsReviewed] = useState(false)
-  const [unreadAlert, setUnreadAlert] = useState({
-    business: false,
-    driver: false,
-  });
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
 
-  const { order, businessData } = props.order;
+  const { order } = props.order;
 
   const walletName: any = {
     cash: {
@@ -314,38 +297,24 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     return objectStatus && objectStatus;
   };
 
-  const handleOpenMessagesForBusiness = () => {
-    setOpenModalForBusiness(true);
-    readMessages && readMessages();
-    setUnreadAlert({ ...unreadAlert, business: false });
-  };
-
-  const handleOpenMessagesForDriver = () => {
-    setOpenModalForDriver(true);
+  const handleGoToMessages = (type: string) => {
     readMessages && readMessages();
-    setUnreadAlert({ ...unreadAlert, driver: false });
-  };
-
-  const unreadMessages = () => {
-    const length = messages?.messages.length;
-    const unreadLength = order?.unread_count;
-    const unreadedMessages = messages.messages.slice(
-      length - unreadLength,
-      length,
-    );
-    const business = unreadedMessages.some((message: any) =>
-      message?.can_see?.includes(2),
-    );
-    const driver = unreadedMessages.some((message: any) =>
-      message?.can_see?.includes(4),
-    );
-    setUnreadAlert({ business, driver });
-  };
-
-  const handleCloseModal = () => {
-    setOpenModalForBusiness(false);
-    setOpenModalForDriver(false);
-  };
+    navigation.navigate(
+      'MessageDetails',
+      {
+        type,
+        order,
+        messages,
+        setMessages,
+        orderId: order?.id,
+        business: type === 'business',
+        driver: type === 'driver',
+        onClose: () => navigation?.canGoBack()
+        ? navigation.goBack()
+        : navigation.navigate('BottomTab', { screen: 'MyOrders' }),
+      }
+    )
+  }
 
   const handleArrowBack: any = () => {
     if (!isFromCheckout) {
@@ -394,14 +363,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     };
   }, []);
 
-  useEffect(() => {
-    if (messagesReadList?.length) {
-      openModalForBusiness
-        ? setUnreadAlert({ ...unreadAlert, business: false })
-        : setUnreadAlert({ ...unreadAlert, driver: false });
-    }
-  }, [messagesReadList]);
-
   const locations = [
     {
       ...order?.driver?.location,
@@ -606,7 +567,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     )}
                     <TouchableOpacity
                       style={{ paddingStart: 5 }}
-                      onPress={() => handleOpenMessagesForBusiness()}>
+                      onPress={() => handleGoToMessages('business')}>
                       <OIcon
                         src={theme.images.general.chat}
                         width={16}
@@ -735,7 +696,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         </OText>
                         <Icons>
                           <TouchableOpacity
-                            onPress={() => handleOpenMessagesForDriver()}>
+                            onPress={() => handleGoToMessages('driver')}>
                             <OIcon
                               src={theme.images.general.chat}
                               width={16}
@@ -1018,22 +979,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </OrderContent>
         </>
       )}
-      <OModal
-        open={openModalForBusiness || openModalForDriver}
-        entireModal
-        customClose
-        onClose={() => handleCloseModal()}>
-        <Messages
-          type={openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER}
-          orderId={order?.id}
-          messages={messages}
-          order={order}
-          business={openModalForBusiness}
-          driver={openModalForDriver}
-          setMessages={setMessages}
-          onClose={handleCloseModal}
-        />
-      </OModal>
       <OModal
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}

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

@@ -16,6 +16,7 @@ import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import FastImage from 'react-native-fast-image'
 
 import {
 	OIcon,
@@ -142,12 +143,13 @@ const ProfileListUI = (props: ProfileParams) => {
 			<CenterView style={styles.pagePadding}>
 				<View style={styles.photo}>
 					{user?.photo ? (
-						<OIcon
-							url={user?.photo}
-							cover
-							width={60}
-							height={60}
-							borderRadius={8}
+						<FastImage
+							style={{ height: 60, width: 60, borderRadius: 8 }}
+							source={{
+								uri: user?.photo,
+								priority: FastImage.priority.normal,
+							}}
+							resizeMode={FastImage.resizeMode.cover}
 						/>
 					) : (
 						<Ionicons name='person-outline' size={50} style={{ marginRight: 10 }} />

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

@@ -21,6 +21,7 @@ import NavBar from '../NavBar';
 import { Container } from '../../layouts/Container';
 import { VerifyPhone } from '../VerifyPhone'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import FastImage from 'react-native-fast-image'
 
 const ProfileUI = (props: ProfileParams) => {
 	const {
@@ -288,12 +289,13 @@ const ProfileUI = (props: ProfileParams) => {
 					<CenterView style={styles.pagePadding}>
 						<View style={styles.photo}>
 							{user?.photo ? (
-								<OIcon
-									url={user?.photo}
-									cover
-									width={60}
-									height={60}
-									borderRadius={8}
+								<FastImage
+									style={{ height: 60, width: 80, borderRadius: 8 }}
+									source={{
+										uri: user?.photo,
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
 								/>
 							) : (
 								<Ionicons name='person-outline' size={50} />

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

@@ -383,7 +383,7 @@ export interface MessagesParams {
 	handleSend?: () => {},
 	setImage?: (image: string | null) => {},
 	setMessage?: (comment: string) => {},
-	setMessages?: () => {},
+	setMessages?: (image: any | null) => {},
 	readMessages?: () => {},
 	onClose?: () => void,
 	isMeesageListing?: boolean,