ordering-ui-react-native 0.16.12 → 0.16.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.12",
+  "version": "0.16.15",
   "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/src/navigators/CheckoutNavigator.tsx

@@ -6,6 +6,7 @@ import AddressForm from '../pages/AddressForm'
 import CartList from '../pages/CartList'
 import CheckoutPage from '../pages/Checkout';
 import BusinessProductsList from '../pages/BusinessProductsList';
+import MultiCheckout from '../pages/MultiCheckout';
 
 const Stack = createStackNavigator();
 
@@ -53,6 +54,11 @@ const CheckoutNavigator = (props: any) => {
         component={AddressForm}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="MultiCheckout"
+        children={() => <MultiCheckout {...checkoutProps} />}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 }

package/src/navigators/HomeNavigator.tsx

@@ -23,6 +23,7 @@ import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
 import Sessions from '../pages/Sessions';
 import Splash from '../pages/Splash';
 import ProductDetails from '../pages/ProductDetails';
+import MultiOrdersDetails from '../pages/MultiOrdersDetails';
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
@@ -170,6 +171,11 @@ const HomeNavigator = (e : any) => {
                     component={Sessions}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="MultiOrdersDetails"
+                    component={MultiOrdersDetails}
+                    options={{ headerShown: false }}
+                  />
                 </>
               )}
             </>

package/src/pages/MultiCheckout.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Platform, KeyboardAvoidingView, StyleSheet } from 'react-native'
+import { MultiCheckout as MultiCheckoutController } from '../../themes/original/src/components/MultiCheckout'
+
+const MultiCheckout = (props: any) => {
+  const multiCheckoutProps = {
+    ...props,
+    onPlaceOrderClick: (orderUuids: any) => {
+      props.navigation.navigate('MultiOrdersDetails', { orderUuids: orderUuids, isFromMultiCheckout: true })
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <MultiCheckoutController {...multiCheckoutProps} />
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingBottom: 70,
+  },
+});
+
+export default MultiCheckout

package/src/pages/MultiOrdersDetails.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import { MultiOrdersDetails as MultiOrdersDetailsController } from '../../themes/original/src/components/MultiOrdersDetails'
+import styled from 'styled-components/native';
+
+const SafeAreaContainer = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+  padding-top: ${Platform.OS === 'ios' ? '0px' : '24px'};
+`;
+
+const MultiOrdersDetails = ({ navigation, route }: any) => {
+  const multiOrdersDetailsProps = {
+    navigation,
+    orderUuids: route.params?.orderUuids || [],
+    isFromMultiCheckout: route.params?.isFromMultiCheckout,
+    onRedirectPage: () => navigation.navigate('BusinessList')
+  }
+
+  return (
+    <SafeAreaContainer>
+      <MultiOrdersDetailsController {...multiOrdersDetailsProps} />
+    </SafeAreaContainer>
+  )
+}
+
+export default MultiOrdersDetails

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/index.tsx

@@ -32,6 +32,7 @@ import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
 import { Messages } from './src/components/Messages';
+import { MyOrders } from './src/components/MyOrders';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -47,6 +48,8 @@ import { UpsellingProducts } from './src/components/UpsellingProducts';
 import { UserVerification } from './src/components/UserVerification';
 import { BusinessListingSearch } from './src/components/BusinessListingSearch';
 import { LastOrders } from './src/components/LastOrders';
+import { MultiCheckout } from './src/components/MultiCheckout'
+import { MultiOrdersDetails } from './src/components/MultiOrdersDetails'
 import NavBar from './src/components/NavBar';
 import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
@@ -187,6 +190,8 @@ export {
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	MultiCheckout,
+	MultiOrdersDetails,
 	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
@@ -240,6 +245,7 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	MyOrders,
 	ORDER_TYPES,
 	USER_TYPE,
 

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

@@ -21,7 +21,8 @@ export const BusinessItemAccordion = (props: any) => {
 		singleBusiness,
 		handleClearProducts,
 		handleClickCheckout,
-		checkoutButtonDisabled
+		checkoutButtonDisabled,
+		isMultiCheckout
 	} = props
 
 	const [orderState] = useOrder();
@@ -139,7 +140,7 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && (
+			{!isActive && !isClosed && !!isProducts && !isMultiCheckout && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
 					{cart?.valid_products && (

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

@@ -7,10 +7,8 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-  min-height: 120px;
   ${(props: any) => props.isClosed && css`
 	  opacity: 0.5;
-    min-height: 60px;
   `}
 `
 

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: -37,
+                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/BusinessProductsListing/index.tsx

@@ -102,6 +102,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
+	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
 	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
@@ -123,13 +124,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
+		if (isCheckoutMultiBusinessEnabled) {
+			onRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+			onRedirect('CheckoutNavigator', {
+				screen: 'CheckoutPage',
+				cartUuid: currentCart?.uuid,
+				businessLogo: logo,
+				businessName: business?.name,
+				cartTotal: currentCart?.total
+			})
+		}
 		setOpenUpselling(false)
 	}
 

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/Cart/index.tsx

@@ -39,7 +39,8 @@ const CartUI = (props: any) => {
     handleChangeComment,
     commentState,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    isMultiCheckout
   } = props
 
   const theme = useTheme();
@@ -59,6 +60,7 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
+	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
@@ -96,13 +98,19 @@ const CartUI = (props: any) => {
   const handleUpsellingPage = () => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    props.onNavigationRedirect('CheckoutNavigator', {
-      screen: 'CheckoutPage',
-      cartUuid: cart?.uuid,
-      businessLogo: cart?.business?.logo,
-      businessName: cart?.business?.name,
-      cartTotal: cart?.total
-    })
+    if (isCheckoutMultiBusinessEnabled) {
+			props.onNavigationRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
+      })
+    }
   }
 
   const getIncludedTaxes = () => {
@@ -165,6 +173,7 @@ const CartUI = (props: any) => {
         handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+        isMultiCheckout={isMultiCheckout}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion

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(() => {