ordering-ui-react-native 0.12.67 → 0.12.68

package/package.json

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

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/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
 }