ordering-ui-react-native 0.12.66 → 0.12.70

package/package.json

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

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -25,6 +25,8 @@ import {
 import { useTheme } from 'styled-components/native';
 import { ReviewCustomer } from '../ReviewCustomer'
 
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+
 interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
@@ -150,46 +152,56 @@ export const OrderContentComponent = (props: OrderContent) => {
         {
           (order?.customer?.name || order?.customer?.lastname) && (
             <View style={{ flexDirection: 'row' }}>
-              <OText numberOfLines={2} mBottom={4}>
-                {order?.customer?.name && (
-                  <OText
-                    numberOfLines={1}
-                    mBottom={4}
-                    ellipsizeMode="tail"
-                    space>
-                    {order?.customer?.name}
-                  </OText>
-                )}
-                {order?.customer?.middle_name && (
-                  <OText
-                    numberOfLines={1}
-                    mBottom={4}
-                    ellipsizeMode="tail"
-                    space>
-                    {order?.customer?.middle_name}
-                  </OText>
-                )}
-                {order?.customer?.lastname && (
-                  <OText
-                    numberOfLines={1}
-                    mBottom={4}
-                    ellipsizeMode="tail"
-                    space>
-                    {order?.customer?.lastname}
-                  </OText>
-                )}
-                {
-                  order?.customer?.second_lastname && (
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                <View style={{ flexDirection: 'row' }}>
+                  {order?.customer?.name && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
                       ellipsizeMode="tail"
                       space>
-                      {order?.customer?.second_lastname}
+                      {order?.customer?.name}
                     </OText>
-                  )
-                }
-              </OText>
+                  )}
+                  {order?.customer?.middle_name && (
+                    <OText
+                      numberOfLines={1}
+                      mBottom={4}
+                      ellipsizeMode="tail"
+                      space>
+                      {order?.customer?.middle_name}
+                    </OText>
+                  )}
+                  {order?.customer?.lastname && (
+                    <OText
+                      numberOfLines={1}
+                      mBottom={4}
+                      ellipsizeMode="tail"
+                      space>
+                      {order?.customer?.lastname}
+                    </OText>
+                  )}
+                  {
+                    order?.customer?.second_lastname && (
+                      <OText
+                        numberOfLines={1}
+                        mBottom={4}
+                        ellipsizeMode="tail"
+                        space>
+                        {order?.customer?.second_lastname}
+                      </OText>
+                    )
+                  }
+                </View>
+                {order?.user_review?.qualification && (
+                  <View style={{ flexDirection: 'row' }}>
+                    <MaterialIcon style={{ bottom: 2 }} name='star' size={24} color={theme.colors.arrowColor} />
+                    <OText mLeft={5}>
+                      {order?.user_review?.qualification}
+                    </OText>
+                  </View>
+                )}
+              </View>
             </View>
           )
         }

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

@@ -290,14 +290,6 @@ const AddressListUI = (props: AddressListParams) => {
 							/>
 						</>
 					)}
-					{!isFromProfile && addressList?.addresses?.length > 0 && (
-						<OButton
-							text={t('CONTINUE', 'Continue')}
-							style={styles.button}
-							onClick={() => onNavigatorRedirect()}
-							textStyle={{ color: theme.colors.white }}
-						/>
-					)}
 				</AddressListContainer>
 			)}
 		</Container>

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import Geolocation from '@react-native-community/geolocation'
 import {
 	View,
 	StyleSheet,
@@ -16,6 +17,7 @@ import {
 	useUtils,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
 	Search,
@@ -25,7 +27,8 @@ import {
 	HeaderWrapper,
 	ListWrapper,
 	FeaturedWrapper,
-	OrderProgressWrapper
+	OrderProgressWrapper,
+	FarAwayMessage
 } from './styles';
 
 import { SearchBar } from '../SearchBar';
@@ -38,7 +41,7 @@ import { OrderTypeSelector } from '../OrderTypeSelector';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
-import { getTypesText } from '../../utils';
+import { getTypesText, convertToRadian } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
 import { useIsFocused } from '@react-navigation/native';
 
@@ -85,6 +88,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 		searchInput: {
 			fontSize: 12,
+		},
+		iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
 		}
 	});
 
@@ -98,6 +110,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const { top } = useSafeAreaInsets();
 
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
+	const [isFarAway, setIsFarAway] = useState(false)
 
 	// const timerId = useRef<any>(false)
 	// const panResponder = useRef(
@@ -127,6 +140,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	};
 
+	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
+    const R = 6371 // km
+    const dLat = convertToRadian(lat2 - lat1)
+    const dLon = convertToRadian(lon2 - lon1)
+    const curLat1 = convertToRadian(lat1)
+    const curLat2 = convertToRadian(lat2)
+    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+    return R * c
+  }
+
 	useEffect(() => {
 		if (businessesList.businesses.length > 0) {
 			const fb = businessesList.businesses.filter((b) => b.featured == true);
@@ -148,6 +172,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	//   resetInactivityTimeout()
 	// }, [])
 
+	useEffect(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
 			<HeaderWrapper
@@ -180,6 +217,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						</OText>
 					</AddressInput>
 				</Search>
+				{isFarAway && (
+					<FarAwayMessage style={styles.farAwayMsg}>
+						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+					</FarAwayMessage>
+				)}
 				<OrderControlContainer>
 					<View style={styles.wrapperOrderOptions}>
 						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>

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

@@ -73,4 +73,13 @@ export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
 	padding-horizontal: 40px;
-`
+`
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-bottom: 25px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+`

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, BackHandler, KeyboardAvoidingView, Platform } from 'react-native';
+import { View, StyleSheet, BackHandler, KeyboardAvoidingView, Platform, Linking } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import LinearGradient from 'react-native-linear-gradient';
 import { Messages } from '../Messages';
@@ -483,10 +483,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                   <Icons>
                     <TouchableOpacity
-                      onPress={() =>
-                        props.navigation.navigate('Business', {
-                          store: businessData?.slug,
-                        })
+                      onPress={() => order?.business?.cellphone &&
+                        Linking.openURL(`tel:${order?.business?.cellphone}`)
                       }
                       style={{ paddingEnd: 5 }}>
                       <OIcon

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

@@ -314,6 +314,41 @@ export const UserFormDetailsUI = (props: any) => {
 									)}
 								</WrapperPhone>
 							)}
+							<Controller
+								control={control}
+								render={() => (
+									<>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('PASSWORD', 'Password')}
+										</OText>
+										<OInput
+											name='password'
+											placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
+											inputStyle={styles.inputStyle}
+											style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
+											autoCapitalize='none'
+											isDisabled={false}
+											value={
+												formState?.changes['password'] ??
+												(user && user['password']) ??
+												''
+											}
+											onChange={(val: any) => {
+												setValue('password', val.target.value)
+												handleChangeInput(val)
+											}}
+											autoCorrect
+											type='default'
+											returnKeyType="done"
+											autoCompleteType='off'
+											isSecured
+										/>
+									</>
+								)}
+								name='password'
+								rules={getInputRules({name: 'password', code: 'password'})}
+								defaultValue=''
+							/>
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (
@@ -339,7 +374,7 @@ export const UserFormDetailsUI = (props: any) => {
 								borderColor={theme.colors.primary}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
-								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20 }}
+								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
 								onClick={handleSubmit(onSubmit)}
 							/>
 						)}

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

@@ -114,8 +114,9 @@ const ProfileUI = (props: ProfileParams) => {
 					console.log('ImagePicker Error: ', response.errorMessage);
 					showToast(ToastType.Error, response.errorMessage);
 				} else {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`;
+					if (response?.assets?.length > 0) {
+						const image = response?.assets[0]
+						const url = `data:${image.type};base64,${image.base64}`
 						handleButtonUpdateClick(null, true, url);
 					} else {
 						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));

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

@@ -33,8 +33,8 @@ export const VerifyPhone = (props: any) => {
 
 	const styles = StyleSheet.create({
 		inputStyle: {
-			width: 80,
-			height: 80,
+			width: 75,
+			height: 75,
 			marginBottom: 25,
 			borderWidth: 1,
 			borderColor: theme.colors.disabled,
@@ -50,12 +50,21 @@ export const VerifyPhone = (props: any) => {
 	const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
 	const [verifyCode, setVerifyCode] = useState({ 0: '', 1: '', 2: '', 3: '' })
 	const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
+	const inputRefs: any = [
+		React.createRef(),
+		React.createRef(),
+		React.createRef(),
+		React.createRef()
+	]
 
 	const lastNumbers = phone?.cellphone &&
 		`${phone?.cellphone.charAt(phone?.cellphone.length - 2)}${phone?.cellphone.charAt(phone?.cellphone.length - 1)}`
 
-	const handleChangeCode = (val: number, i: number) => {
+	const goNextAfterEdit = (val: number, i: number) => {
 		setVerifyCode({ ...verifyCode, [i]: val })
+		if(val && i < inputRefs.length - 1) {
+			inputRefs[i+1].focus()
+		}
 	}
 
 	const checkResult = (result: any) => {
@@ -141,14 +150,15 @@ export const VerifyPhone = (props: any) => {
 				</CountDownContainer>
 			</WrappCountdown>
 			<InputsSection>
-				{[...Array(4),].map((_: any, i: number) => (
+				{inputRefs.map((k: any, idx: number) => (
 					<TextInput
-						key={i}
+						key={idx}
 						keyboardType='number-pad'
-						placeholder={'0'}
-						style={styles.inputStyle}
-						onChangeText={(val: any) => handleChangeCode(val, i)}
+						ref={r => inputRefs[idx] =  r}
 						maxLength={1}
+						style={styles.inputStyle}
+						placeholder={'0'}
+						onChangeText={(val: any) => goNextAfterEdit(val, idx)}
 						editable={timer !== '00:00'}
 					/>
 				))}
@@ -173,11 +183,11 @@ export const VerifyPhone = (props: any) => {
 					</ErrorSection>
 				)}
 			<ResendSection>
-				<OText size={17} style={{ marginRight: 5 }}>
+				<OText size={16} style={{ marginRight: 5 }}>
 					{t('ARE_YOU_NOT_SEEING_THE_CODE', 'Are you not seeing the code?')}
 				</OText>
 				<Pressable onPress={() => handleSendCodeAgain()}>
-					<OText size={17} color={theme.colors.primary}>
+					<OText size={16} color={theme.colors.primary}>
 						{t('SEND_AGAIN', 'Send Again')}
 					</OText>
 				</Pressable>

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

@@ -3,8 +3,8 @@ import styled from 'styled-components/native';
 export const Container = styled.View`
   width: 100%;
   padding-top: 5px;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: 40px;
+  padding-right: 40px;
 `
 
 export const CountDownContainer = styled.View`

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

@@ -168,4 +168,13 @@ export const transformCountryCode = (countryCode : number) => {
 export const getTypesText = (value: number) => {
   const ret = ORDER_TYPES.find((type: any) => type.value == value);
   return ret?.content;
+}
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ export const convertToRadian = (value: number) => {
+  return value * Math.PI / 180
 }

package/themes/single-business/src/components/DriverTips/index.tsx

@@ -41,10 +41,11 @@ const DriverTipsUI = (props: any) => {
 			borderRadius: 30
 		},
 		inputStyle: {
+			borderColor: theme.colors.border,
+			borderRadius: 8,
+			marginRight: 20,
+			height: 44,
 			flex: 1,
-			borderWidth: 1,
-			borderColor: theme.colors.disabled,
-			marginRight: 10
 		}
 	})
 
@@ -117,21 +118,23 @@ const DriverTipsUI = (props: any) => {
 						<OInput
 							placeholder={placeholderCurrency}
 							style={style.inputStyle}
+              inputStyle={{ fontSize: 12 }}
 							onChange={handleChangeDriverTip}
 							autoCapitalize='none'
 							autoCorrect={false}
 						/>
 						<OButton
-							text={t('APPLY_TIP', 'Apply Tip')}
+							text={t('APPLY', 'Apply')}
 							bgColor={theme.colors.primary}
 							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white', fontSize: 20 }}
+							textStyle={{ color: 'white', fontSize: 12 }}
 							imgRightSrc={null}
 							isDisabled={!(value > 0 && value !== driverTip) || !value}
 							onClick={() => {
 								handlerChangeOption(value)
 								setvalue(0)
 							}}
+              style={{ borderRadius: 8, height: 44, shadowOpacity: 0 }}
 						/>
 					</DTWrapperInput>
 					{parseFloat(driverTip || 0) > 0 && (

package/themes/single-business/src/components/DriverTips/styles.tsx

@@ -60,5 +60,4 @@ export const DTWrapperInput = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-top: 20px;
 `

package/themes/single-business/src/components/OrderSummary/index.tsx

@@ -192,19 +192,19 @@ const OrderSummaryUI = (props: any) => {
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
-                    <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
+                    <OText size={12} style={{ marginBottom: 10 }}>{t('COMMENTS', 'Comments')}</OText>
                     <View style={{ flex: 1, width: '100%' }}>
                       <OInput
                         value={cart?.comment}
                         placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
                         onChange={(value: string) => handleChangeComment(value)}
                         style={{
+                          borderColor: theme.colors.border,
+                          borderRadius: 10,
+                          marginBottom: 20,
+                          height: 104,
+                          maxHeight: 104,
                           alignItems: 'flex-start',
-                          width: '100%',
-                          height: 100,
-                          borderColor: theme.colors.textSecondary,
-                          paddingRight: 50,
-                          marginTop: 10
                         }}
                         multiline
                         inputStyle={{ color: theme.colors.textPrimary, fontSize: 12 }}