ordering-ui-react-native 0.16.12 → 0.16.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.12",
+  "version": "0.16.13",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -109,6 +109,7 @@
     "react-native-sound": "^0.11.1",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
+    "react-native-tracking-transparency": "^0.1.1",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",

package/themes/business/src/components/DriverMap/index.tsx

@@ -327,6 +327,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       justifyContent: 'center',
       paddingVertical: 10,
       paddingHorizontal: 80,
+      position: 'absolute'
     },
     showButton: {
       alignSelf: 'center',
@@ -490,14 +491,14 @@ export const DriverMap = (props: GoogleMapsParams) => {
             </View>
           </View>
         </View>
-        <View style={styles.buttonContainer}>
+        <View style={{
+          ...styles.buttonContainer,
+          bottom: showAcceptOrReject ? 80 : 0
+        }}>
           <OButton
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
-            style={{
-              ...styles.showButton,
-              bottom: showAcceptOrReject ? 80 : 0
-            }}
+            style={styles.showButton}
             onClick={() => showLocation({
               latitude: destination.latitude,
               longitude: destination.longitude,

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { OModal, OText, OIcon } from '../../shared'
+import { ScrollView } from 'react-native'
+import { useUtils } from 'ordering-components/native'
+
+interface CategoryDescriptionParams {
+    openDescription?: {name: string, image: string, description: string} | null,
+    setOpenDescription: any;
+}
+
+function categoryDescriptionPropsAreEqual(prev : any, next : any) {
+    return prev.openDescription === next.openDescription
+}
+
+const CategoryDescription = (props : CategoryDescriptionParams) => {
+    const [{ optimizeImage }] = useUtils()
+    return (
+        <OModal
+            open={!!props.openDescription}
+            onClose={() => props.setOpenDescription(null)}
+            styleContainerCloseButton={{
+                marginLeft: -30,
+                width: 55,
+                height: 55,
+                marginTop: 2
+            }}
+        >
+            <OText size={20} style={{ paddingLeft: 70, paddingRight: 20, bottom: 25 }}>{props.openDescription?.name}</OText>
+            <ScrollView style={{ padding: 20 }}>
+                {!!props.openDescription?.image && (
+                    <OIcon
+                        url={optimizeImage(props.openDescription?.image, 'h_100,c_limit')}
+                        width={240}
+                        height={240}
+                        style={{ borderRadius: 7.6 }}
+                    />
+                )}
+                <OText mBottom={60}>{props.openDescription?.description}</OText>
+            </ScrollView>
+        </OModal>
+    )
+}
+
+export const CategoryDescriptionMemoized = React.memo(CategoryDescription,categoryDescriptionPropsAreEqual)

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

@@ -10,6 +10,7 @@ import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
+import { CategoryDescriptionMemoized } from './CategoryDescription';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -33,8 +34,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     subcategoriesSelected,
     onClickCategory,
     lazyLoadProductsRecommended,
-    isFiltMode,
-    handleUpdateProducts
+    handleUpdateProducts,
+    isFiltMode
   } = props;
 
   const [, t] = useLanguage();
@@ -104,7 +105,6 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     )
   }
 
-
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
       <HeaderWrapper>
@@ -317,29 +317,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
-      <OModal
-        open={!!openDescription}
-        onClose={() => setOpenDescription(null)}
-        styleContainerCloseButton={{
-          marginLeft: -30,
-          width: 55,
-          height: 55,
-          marginTop: 2
-        }}
-      >
-        <OText size={20} style={{ paddingLeft: 70, paddingRight: 20, bottom: 25 }}>{openDescription?.name}</OText>
-        <ScrollView style={{ padding: 20 }}>
-          {!!openDescription?.image && (
-            <OIcon
-              url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
-              width={240}
-              height={240}
-              style={{ borderRadius: 7.6 }}
-            />
-          )}
-          <OText mBottom={60}>{openDescription?.description}</OText>
-        </ScrollView>
-      </OModal>
+      {!!openDescription && (
+        <CategoryDescriptionMemoized
+          openDescription={openDescription}
+          setOpenDescription={setOpenDescription}
+        />
+      )}
     </ProductsContainer>
   );
 };

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
+import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
 	StyleSheet,
@@ -194,17 +195,27 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}
 
+	const checkUserLocation = async () => {
+		let trackingStatus = await getTrackingStatus()
+		if (trackingStatus === 'not-determined') {
+			trackingStatus = await requestTrackingPermission()
+		}
+		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+			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
+			})
+		}
+	}
+
 	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
-		})
+		checkUserLocation()
 	}, [orderState?.options?.address?.location])
 
 	useEffect(() => {

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import Geolocation from '@react-native-community/geolocation'
 import Geocoder from 'react-native-geocoding'
 import { GpsButtonStyle } from './styles'
@@ -55,14 +56,20 @@ export const GPSButton = (props: any) => {
     })
   }
 
-	const getCurrentPosition = () => {
-		setLoading(true);
-		Geolocation.getCurrentPosition((pos) => {
-			geoCodePosition(pos.coords);
-		}, (err) => {
-			setLoading(false);
-			console.log(err);
-		});
+	const getCurrentPosition = async () => {
+    let trackingStatus = await getTrackingStatus()
+		if (trackingStatus === 'not-determined') {
+			trackingStatus = await requestTrackingPermission()
+		}
+		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+      setLoading(true);
+      Geolocation.getCurrentPosition((pos) => {
+        geoCodePosition(pos.coords);
+      }, (err) => {
+        setLoading(false);
+        console.log(err);
+      });
+    }
 	}
 
 	useEffect(() => {