ordering-ui-react-native 0.16.10 → 0.16.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.10",
+  "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/src/components/StripeMethodForm/index.tsx

@@ -102,7 +102,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       shippingMethods: [
         {
           amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
-          identifier: 'DPS',
+          identifier: 'standard',
           label: 'Courier',
           detail: 'Delivery',
           type: 'final',
@@ -125,7 +125,6 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           last4: paymentMethod.Card.last4
         }
       })
-      onCancel()
     }
   }
 

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>
@@ -118,7 +118,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             !subcategoriesSelected.find((subcategory: any) => subcategory?.parent_category_id === category?.id) ||
             subcategoriesSelected?.some((subcategory: any) => subcategory.id === product?.category_id))
           ?.sort((a: any, b: any) => a.rank - b.rank)
-          ?.map((product: any, i : number) => (
+          ?.map((product: any, i: number) => (
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
@@ -317,23 +317,12 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
-      <OModal
-        open={!!openDescription}
-        onClose={() => setOpenDescription(null)}
-      >
-        <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(() => {

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

@@ -1027,7 +1027,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           )}
                         </View>
                         <OText>
-                          -{parsePrice(event.amount)}
+                          -{parsePrice(event.amount, {isTruncable: true})}
                         </OText>
                       </View>
                     ))}

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

@@ -45,7 +45,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +87,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-      (
-        <>
-          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-            <Container
-              key={wallet.id}
-              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-              onPress={() => handleOnChange(idx, wallet)}
-              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-            >
-              <SectionLeft>
-                {checkedState[idx] ? (
-                  <MaterialCommunityIcons
-                    name="checkbox-marked"
-                    size={25}
-                    color={theme.colors.primary}
-                  />
-                ) : (
-                  <MaterialCommunityIcons
-                    name="checkbox-blank-outline"
-                    size={25}
-                    color={theme.colors.disabled}
-                  />
-                )}
-                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                  <View>
-                    <OText
-                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
-                        color: theme.colors.disabled
-                      } : {}}
-                    >
-                      {walletName[wallet.type]?.name}
-                    </OText>
+        (
+          <>
+            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+              <Container
+                key={wallet.id}
+                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+                onPress={() => handleOnChange(idx, wallet)}
+                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+              >
+                <SectionLeft>
+                  {checkedState[idx] ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={25}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={25}
+                      color={theme.colors.disabled}
+                    />
+                  )}
+                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                    <View>
+                      <OText
+                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
+                          color: theme.colors.disabled
+                        } : {}}
+                      >
+                        {walletName[wallet.type]?.name}
+                      </OText>
+                    </View>
                   </View>
-              </View>
-              </SectionLeft>
-
-              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
-                {wallet.type === 'cash' && (
-                  <OText>
-                    {parsePrice(wallet?.balance)}
-                  </OText>
-                )}
-                {wallet.type === 'credit_point' && (
-                  <OText>
-                    <OText color={theme.colors.primary} weight='bold'>
-                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                </SectionLeft>
+
+                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
+                  {wallet.type === 'cash' && (
+                    <OText>
+                      {parsePrice(wallet?.balance, { isTruncable: true })}
                     </OText>
+                  )}
+                  {wallet.type === 'credit_point' && (
                     <OText>
-                      {wallet?.balance > 0
-                        ? creditBalance(wallet)
-                        : null}
+                      <OText color={theme.colors.primary} weight='bold'>
+                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                      </OText>
+                      <OText>
+                        {wallet?.balance > 0
+                          ? creditBalance(wallet)
+                          : null}
+                      </OText>
                     </OText>
-                  </OText>
-                )}
-              </View>
-            </Container>
-          ))}
-        </>
-      )}
+                  )}
+                </View>
+              </Container>
+            ))}
+          </>
+        )}
 
       {walletsState?.loading && (
         <View>

package/themes/original/src/components/shared/OModal.tsx

@@ -21,6 +21,7 @@ interface Props {
 	isNotDecoration?: boolean;
 	styleCloseButton?: any,
 	isAvoidKeyBoardView?: boolean;
+	styleContainerCloseButton?: any;
 }
 const KeyboardView = styled.KeyboardAvoidingView`
   flex-grow: 1;
@@ -45,6 +46,7 @@ const OModal = (props: Props): React.ReactElement => {
 		isNotDecoration,
 		style,
 		styleCloseButton,
+		styleContainerCloseButton,
 		isAvoidKeyBoardView
 	} = props
 
@@ -55,7 +57,7 @@ const OModal = (props: Props): React.ReactElement => {
 			{!entireModal ? (
 				<View style={styles.centeredView}>
 					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-						<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
+						<TouchableOpacity style={{...styles.wrapperIcon, ...styleContainerCloseButton}} onPress={onClose}>
 							<OIcon
 								src={theme.images.general.close}
 								width={16}