ordering-ui-react-native 0.12.79 → 0.12.83

package/themes/single-business/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,
@@ -28,6 +29,7 @@ import {
   TopHeader,
   DropOptionButton,
   WrapSearchBar,
+  FarAwayMessage
 } from './styles';
 
 import { SearchBar } from '../SearchBar';
@@ -41,6 +43,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../BusinessFeaturedController';
 import { getTypesText } from '../../utils';
 import NavBar from '../NavBar';
+import { getDistance } from '../../utils'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 const PIXELS_TO_SCROLL = 1000;
 
@@ -97,6 +101,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
       height: 260,
       paddingHorizontal: 40
     },
+    iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
+		}
   });
 
 
@@ -109,6 +122,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
   const { top } = useSafeAreaInsets();
 
   const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
+	const [isFarAway, setIsFarAway] = useState(false)
 
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
 
@@ -135,6 +149,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
     }
   }, [businessesList.businesses]);
 
+  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}
@@ -171,6 +198,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
             {orderState?.options?.address?.address}
           </OText>
         </AddressInput>
+        {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}>
             <DropOptionButton

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

@@ -95,3 +95,12 @@ export const WrapSearchBar = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   flex: 1;
 `
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+  width: 100%;
+`

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

@@ -259,7 +259,10 @@ export const ProductOptionsUI = (props: any) => {
   }, []);
 
   return (
-    <>
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
       <ScrollView ref={scrollViewRef}>
         {!error && (
           <>
@@ -710,7 +713,7 @@ export const ProductOptionsUI = (props: any) => {
           </View>
         </ProductActions>
       )}
-    </>
+    </KeyboardAvoidingView>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
 import LinearGradient from 'react-native-linear-gradient'
@@ -14,7 +14,7 @@ import {
   RatingTextContainer
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
-import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-native';
+import { TouchableOpacity, StyleSheet, View, I18nManager, Keyboard } from 'react-native';
 import NavBar from '../NavBar'
 import { FloatingBottomContainer } from '../../../../../src/layouts/FloatingBottomContainer'
 import Spinner from 'react-native-loading-spinner-overlay'
@@ -90,6 +90,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
+  const scrollViewRef = useRef<any>()
 
   const onSubmit = () => {
     if (Object.values(stars).some((value: any) => value === 0)) {
@@ -199,9 +200,23 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     setStars({ ...stars, comments: _comment })
   }, [comments, extraComment])
 
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => {
+        scrollViewRef?.current && scrollViewRef?.current?.scrollToEnd()
+      }
+    );
+
+    return () => {
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
+
   return (
     <>
-      <ReviewOrderContainer>
+      <ReviewOrderContainer ref={scrollViewRef}>
         <NavBar
           title={t('REVIEW_ORDER', 'Review Order')}
           titleAlign={'center'}

package/themes/single-business/src/utils/index.tsx

@@ -251,3 +251,30 @@ export const getTextOrderStatus = (s: string, t: any) => {
   const objectStatus = orderStatus.find((o) => o.key === status)
   return objectStatus && objectStatus
 }
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ export const convertToRadian = (value: number) => {
+  return value * Math.PI / 180
+}
+
+/**
+ * Function to distance between two locations
+ * @param lat1 Lat for first location
+ * @param lon1 Lon for first location
+ * @param lat2 Lat for second location
+ * @param lon2 Lon for second location
+ */
+ export 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
+}

package/themes/uber-eats/src/components/BusinessesListing/index.tsx

@@ -1,7 +1,10 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager } from 'react-native'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import Geolocation from '@react-native-community/geolocation'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+
 import {
   BusinessList as BusinessesListingController,
   useLanguage,
@@ -13,7 +16,7 @@ import {
   useToast
 } from 'ordering-components/native'
 
-import { BusinessListContainer, Divider, Search, OrderControlContainer, AddressInput, WrapMomentOption } from './styles'
+import { BusinessListContainer, Divider, Search, OrderControlContainer, AddressInput, WrapMomentOption, FarAwayMessage } from './styles'
 
 import NavBar from '../NavBar'
 import { SearchBar } from '../SearchBar'
@@ -27,6 +30,7 @@ import { OrderTypeSelector } from '../OrderTypeSelector'
 import { MomentOption } from '../MomentOption'
 import { HighestRatedBusinesses } from '../HighestRatedBusinesses'
 import { useTheme } from 'styled-components/native'
+import { getDistance } from '../../utils'
 
 const PIXELS_TO_SCROLL = 1200
 
@@ -61,7 +65,16 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
       borderColor: theme.colors.backgroundGray,
       borderWidth: 1,
       borderRadius: 10,
-    }
+    },
+    iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
+		}
   })
 
   const [, t] = useLanguage()
@@ -73,6 +86,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
   const [openMomentOption, setOpenMomentOption] = useState(false)
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+  const [isFarAway, setIsFarAway] = useState(false)
 
   const handleScroll = ({ nativeEvent }: any) => {
     const y = nativeEvent.contentOffset.y
@@ -85,6 +99,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
     }
   }
 
+  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 (
     <BusinessListContainer>
       {!auth && (
@@ -114,6 +141,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
             style={{ marginRight: 10 }}
           />
         </AddressInput>
+        {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>
+				)}
         <View style={styles.wrapperOrderOptions}>
           <OrderTypeSelector configTypes={configTypes} />
           <WrapMomentOption

package/themes/uber-eats/src/components/BusinessesListing/styles.tsx

@@ -52,3 +52,11 @@ export const WrapMomentOption = styled.TouchableOpacity`
   margin-horizontal: 10px;
   max-width: 240px;
 `
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+`

package/themes/uber-eats/src/utils/index.tsx

@@ -162,3 +162,30 @@ export const transformCountryCode = (countryCode : number) => {
     return parser(value)
   }
 }
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ export const convertToRadian = (value: number) => {
+  return value * Math.PI / 180
+}
+
+/**
+ * Function to distance between two locations
+ * @param lat1 Lat for first location
+ * @param lon1 Lon for first location
+ * @param lat2 Lat for second location
+ * @param lon2 Lon for second location
+ */
+ export 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
+}