ordering-ui-react-native 0.14.95 → 0.14.97-release

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
-	BusinessList as BusinessesListingController,
+  BusinessList as BusinessesListingController,
   useLanguage,
-	useOrder
+  useOrder
 } from 'ordering-components/native';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform, Dimensions } from 'react-native';
@@ -18,116 +18,131 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
   const {
     businessesList,
     onBusinessClick,
-    navigation
+    navigation,
+    isLoading,
+    getBusinesses
   } = props;
 
   const [, t] = useLanguage()
-	const [orderState] = useOrder();
+  const [orderState] = useOrder()
 
   const windowWidth = Dimensions.get('window').width;
 
+  useEffect(() => {
+    if (businessesList?.loading || !isLoading) return
+    getBusinesses(true)
+  }, [isLoading])
+
   return (
     <>
-      <ListWrapper>
-        <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
-        <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
-        <ScrollView
-          showsHorizontalScrollIndicator={false}
-          nestedScrollEnabled
-          horizontal
-          style={{ height: 300 }}
-        >
-          {businessesList.loading ? (
-            <>
-              {[
-                ...Array(10).keys()
-              ].map((item, i) => (
-                <Placeholder
-                  Animation={Fade}
-                  key={i}
-                  style={{
-                    marginTop: 20,
-                    width: windowWidth - 100,
-                    paddingHorizontal: 5,
-                    height: '100%'
-                  }}>
-                  <View style={{ width: '100%' }}>
-                    <PlaceholderLine
-                      height={150}
-                      style={{ marginBottom: 20, borderRadius: 8 }}
-                    />
-                    <View style={{ paddingHorizontal: 10 }}>
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          justifyContent: 'space-between',
-                        }}>
-                        <PlaceholderLine
-                          height={15}
-                          width={40}
-                          style={{ marginBottom: 15 }}
-                        />
-                        <PlaceholderLine
-                          height={15}
-                          width={20}
-                          style={{ marginBottom: 15 }}
-                        />
-                      </View>
+
+      {businessesList.loading ? (
+        <>
+          <ScrollView
+            showsHorizontalScrollIndicator={false}
+            nestedScrollEnabled
+            horizontal
+            style={{ height: 300, paddingHorizontal: 40 }}
+          >
+            {[
+              ...Array(10).keys()
+            ].map((item, i) => (
+              <Placeholder
+                Animation={Fade}
+                key={i}
+                style={{
+                  marginTop: 20,
+                  width: windowWidth - 100,
+                  paddingHorizontal: 5,
+                  height: '100%'
+                }}>
+                <View style={{ width: '100%' }}>
+                  <PlaceholderLine
+                    height={150}
+                    style={{ marginBottom: 20, borderRadius: 8 }}
+                  />
+                  <View style={{ paddingHorizontal: 10 }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
                       <PlaceholderLine
                         height={15}
-                        width={30}
-                        style={{ marginBottom: 10 }}
+                        width={40}
+                        style={{ marginBottom: 15 }}
                       />
                       <PlaceholderLine
                         height={15}
-                        width={80}
-                        style={{ marginBottom: 10 }}
+                        width={20}
+                        style={{ marginBottom: 15 }}
                       />
                     </View>
+                    <PlaceholderLine
+                      height={15}
+                      width={30}
+                      style={{ marginBottom: 10 }}
+                    />
+                    <PlaceholderLine
+                      height={15}
+                      width={80}
+                      style={{ marginBottom: 10 }}
+                    />
                   </View>
-                </Placeholder>
-              ))}
-            </>
-          ) : (
-            <>
-              {businessesList.businesses.length > 0 ? (
-                businessesList.businesses?.map(
-                  (business: any) => (
-                    <View
-                      key={business.id}
-                      style={{
-                        width: windowWidth - 100,
-                        paddingHorizontal: 5,
-                        height: '100%'
-                      }}
-                    >
-                      <BusinessController
-                        business={business}
-                        isBusinessOpen={business?.open}
-                        handleCustomClick={onBusinessClick}
-                        orderType={orderState?.options?.type}
-                        navigation={navigation}
-                      />
-                    </View>
+                </View>
+              </Placeholder>
+            ))}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          {businessesList.businesses.length > 0 && (
+            <ListWrapper>
+              <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
+              <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
+              <ScrollView
+                showsHorizontalScrollIndicator={false}
+                nestedScrollEnabled
+                horizontal
+                style={{ height: 300 }}
+              >
+                {
+                  businessesList.businesses?.map(
+                    (business: any) => (
+                      <View
+                        key={business.id}
+                        style={{
+                          width: windowWidth - 100,
+                          paddingHorizontal: 5,
+                          height: '100%'
+                        }}
+                      >
+                        <BusinessController
+                          business={business}
+                          isBusinessOpen={business?.open}
+                          handleCustomClick={onBusinessClick}
+                          orderType={orderState?.options?.type}
+                          navigation={navigation}
+                        />
+                      </View>
+                    )
                   )
-                )
-              ) : (
-                <NotFoundSource />
-              )}
-            </>
+                }
+              </ScrollView>
+            </ListWrapper>
           )}
-        </ScrollView>
-      </ListWrapper>
+        </>
+      )}
     </>
   )
 }
 
 export const HighestRatedBusinesses = (props: any) => {
-	const highestRatedBusinessesProps = {
-		...props,
-		UIComponent: HighestRatedBusinessesUI,
+  const highestRatedBusinessesProps = {
+    ...props,
+    UIComponent: HighestRatedBusinessesUI,
     initialOrderByValue: 'rating'
-	};
+  };
 
-	return <BusinessesListingController {...highestRatedBusinessesProps} />;
+  return <BusinessesListingController {...highestRatedBusinessesProps} />;
 }; 

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

@@ -67,7 +67,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
 	const [, { login }] = useSession();
-	const { control, handleSubmit, errors } = useForm();
+	const { control, handleSubmit, errors, reset, register, setValue } = useForm();
 	const [passwordSee, setPasswordSee] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
 	const [isModalVisible, setIsModalVisible] = useState(false);
@@ -91,7 +91,7 @@ const LoginFormUI = (props: LoginParams) => {
 		inputStyle: {
 			marginBottom: 28,
 			borderWidth: 1,
-			borderColor: theme.colors.border,
+			// borderColor: theme.colors.border,
 			borderRadius: 7.6,
 		},
 		line: {
@@ -189,33 +189,21 @@ const LoginFormUI = (props: LoginParams) => {
 	}, [verifyPhoneState]);
 
 	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			if (phoneInputData.error) {
-				list.unshift({ message: phoneInputData.error });
-			}
-			if (
-				loginTab === 'cellphone' &&
-				!phoneInputData.error &&
-				!phoneInputData.phone.country_phone_code &&
-				!phoneInputData.phone.cellphone
-			) {
-				list.unshift({
-					message: t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Mobile phone is required.',
-					),
-				});
-			}
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
+		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
+		else setValue('cellphone', '')
+	}, [phoneInputData?.phone?.cellphone])
+
+	useEffect(() => {
+    register('cellphone', {
+      required: loginTab === 'cellphone'
+        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+        : null
+    })
+  }, [register])
+
+	useEffect(() => {
+    reset()
+  }, [loginTab])
 
 	return (
 		<Container>
@@ -284,43 +272,58 @@ const LoginFormUI = (props: LoginParams) => {
 				{(useLoginByCellphone || useLoginByEmail) && (
 					<FormInput>
 						{useLoginByEmail && loginTab === 'email' && (
-							<Controller
-								control={control}
-								render={({ onChange, value }: any) => (
-									<OInput
-										placeholder={t('EMAIL', 'Email')}
-										style={loginStyle.inputStyle}
-										icon={theme.images.general.email}
-										onChange={(e: any) => {
-											handleChangeInputEmail(e, onChange);
-										}}
-										value={value}
-										autoCapitalize="none"
-										autoCorrect={false}
-										type="email-address"
-										autoCompleteType="email"
-										returnKeyType="next"
-										onSubmitEditing={() => passwordRef.current?.focus()}
-										blurOnSubmit={false}
-										forwardRef={emailRef}
-									/>
+							<>
+								{errors?.email && (
+									<OText
+										size={14}
+										color={theme.colors.danger5}
+										weight={'normal'}>
+										{errors?.email?.message}{errors?.email?.type === 'required' && '*'}
+									</OText>
 								)}
-								name="email"
-								rules={{
-									required: t(
-										'VALIDATION_ERROR_EMAIL_REQUIRED',
-										'The field Email is required',
-									).replace('_attribute_', t('EMAIL', 'Email')),
-									pattern: {
-										value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-										message: t(
-											'INVALID_ERROR_EMAIL',
-											'Invalid email address',
-										).replace('_attribute_', t('EMAIL', 'Email')),
-									},
-								}}
-								defaultValue=""
-							/>
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<OInput
+											placeholder={t('EMAIL', 'Email')}
+											style={loginStyle.inputStyle}
+											icon={theme.images.general.email}
+											onChange={(e: any) => {
+												handleChangeInputEmail(e, onChange);
+											}}
+											value={value}
+											autoCapitalize="none"
+											autoCorrect={false}
+											type="email-address"
+											autoCompleteType="email"
+											returnKeyType="next"
+											onSubmitEditing={() => passwordRef.current?.focus()}
+											blurOnSubmit={false}
+											forwardRef={emailRef}
+											borderColor={errors?.email ? theme.colors.danger5 : theme.colors.border}
+										/>
+									)}
+									name="email"
+									rules={{
+										required: {
+											value: true,
+											message: 	t(
+											'VALIDATION_ERROR_EMAIL_REQUIRED',
+											'The field Email is required',
+										).replace('_attribute_', t('EMAIL', 'Email'))
+										},
+										pattern: {
+											value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+											message: t(
+												'INVALID_ERROR_EMAIL',
+												'Invalid email address',
+											).replace('_attribute_', t('EMAIL', 'Email')),
+										}
+									}}
+									defaultValue=""
+								/>
+							</>
+
 						)}
 						{useLoginByCellphone && loginTab === 'cellphone' && (
 							<View style={{ marginBottom: 28 }}>
@@ -331,10 +334,18 @@ const LoginFormUI = (props: LoginParams) => {
 										returnKeyType: 'next',
 										onSubmitEditing: () => passwordRef?.current?.focus?.(),
 									}}
+									isStartValidation={errors?.cellphone}
 								/>
 							</View>
 						)}
-
+						{errors?.password && (
+							<OText
+								size={14}
+								color={theme.colors.danger5}
+								weight={'normal'}>
+								{errors?.password?.message}{errors?.password?.type === 'required' && '*'}
+							</OText>
+						)}
 						<Controller
 							control={control}
 							render={({ onChange, value }: any) => (
@@ -366,14 +377,18 @@ const LoginFormUI = (props: LoginParams) => {
 									returnKeyType="done"
 									onSubmitEditing={handleSubmit(onSubmit)}
 									blurOnSubmit
+									borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
 								/>
 							)}
 							name="password"
 							rules={{
-								required: t(
+								required: {
+									value: true,
+									message: t(
 									'VALIDATION_ERROR_PASSWORD_REQUIRED',
 									'The field Password is required',
-								).replace('_attribute_', t('PASSWORD', 'Password')),
+								).replace('_attribute_', t('PASSWORD', 'Password'))
+								}
 							}}
 							defaultValue=""
 						/>

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

@@ -35,6 +35,8 @@ const ORDER_STATUS: any = {
 	19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+	22: 'ORDER_LOOKING_FOR_DRIVER',
+  	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in']
@@ -95,28 +97,18 @@ const MessagesUI = (props: MessagesParams) => {
 	}
 
 	const handleImagePicker = () => {
-		launchImageLibrary({ mediaType: 'photo', maxHeight: 300, maxWidth: 300, includeBase64: true }, (response: any) => {
-			if (response.didCancel) {
-				console.log('User cancelled image picker');
-			} else if (response.errorMessage) {
-				console.log('ImagePicker Error: ', response.errorMessage);
+		launchImageLibrary({ mediaType: 'photo', maxHeight: 2048, maxWidth: 2048, includeBase64: true }, (response: any) => {
+			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'));
 				}
 			}
 		});
@@ -235,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>
@@ -340,30 +332,34 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	)
 
-	const renderSend = (props: any) => (
-		<Send
-			{...props}
-			disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-			alwaysShowSend
-			containerStyle={styles.containerSend}
-		>
-			<OIconButton
-				onClick={onSubmit}
-				style={{
-					height: 44,
-					width: 44,
-					borderRadius: 7.6,
-					opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-					borderColor: theme.colors.primary,
-					backgroundColor: theme.colors.primary,
-				}}
-				iconStyle={{ marginTop: 3, marginRight: 2 }}
-				icon={theme.images.general.enter}
-				disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-				disabledColor={theme.colors.white}
-			/>
-		</Send>
-	)
+	const renderSend = (props: any) => {
+		const isDisabled = (sendMessage?.loading || (message === '' && !image) || messages?.loading)
+		return (
+			<Send
+				{...props}
+				disabled={isDisabled}
+				alwaysShowSend
+				containerStyle={styles.containerSend}
+			>
+				<OIconButton
+					onClick={onSubmit}
+					style={{
+						height: 44,
+						width: 44,
+						borderRadius: 7.6,
+						opacity: isDisabled ? 0.2 : 1,
+						borderColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+						backgroundColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+					}}
+					iconStyle={{ marginTop: 3, marginRight: 2 }}
+					icon={theme.images.general.enter}
+					iconColor={isDisabled ? '#000' : '#fff'}
+					disabled={isDisabled}
+					disabledColor={theme.colors.secondary}
+				/>
+			</Send>
+		)
+	}
 
 	const renderBubble = (props: any) => (
 		<Bubble
@@ -543,9 +539,20 @@ const styles = StyleSheet.create({
 })
 
 export const Messages = (props: MessagesParams) => {
+	const [allMessages, setAllMessages] = useState(props.messages)
+
+	useEffect(() => {
+		setAllMessages(props.messages)
+	}, [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/Messages/styles.tsx

@@ -1,7 +1,5 @@
-
 import styled, { css } from 'styled-components/native'
 
-
 export const Wrapper = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -39,4 +37,4 @@ export const MessageTypeItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.whiteGray};
   `}
-`
+`