ordering-ui-react-native 0.22.47 → 0.22.48-release

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapView, {
   PROVIDER_GOOGLE,
@@ -69,20 +69,26 @@ export const DriverMap = (props: GoogleMapsParams) => {
     stopFollowUserLocation,
   } = useLocation();
 
-  const destination = {
-    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
-    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
-  };
+  const parsedInitialPosition = useCallback(() => {
+    return {
+      latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
+      longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
+    }
+  }, [JSON.stringify(initialPosition)])
 
-  const parsedInitialPosition = {
-    latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
-    longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
-  }
+  const parsedUserLocation = useCallback(() => {
+    return {
+      latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
+      longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
+    }
+  }, [JSON.stringify(userLocation)])
 
-  const parsedUserLocation = {
-    latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
-    longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
-  }
+  const parsedDestination = useCallback(() => {
+    return {
+      latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+      longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
+    }
+  }, [JSON.stringify(location)])
 
   useEffect(() => {
     if (isToFollow) {
@@ -170,21 +176,21 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (driverUpdateLocation.error) return;
 
     calculateDistance(
-      { lat: parsedUserLocation.latitude, lng: parsedUserLocation.longitude },
-      destination,
+      { lat: parsedUserLocation()?.latitude, lng: parsedUserLocation()?.longitude },
+      parsedDestination(),
     );
     // geocodePosition(userLocation);
 
     if (!following.current) return;
     fitCoordinates();
 
-    const { latitude, longitude } = parsedUserLocation;
+    const { latitude, longitude } = parsedUserLocation();
 
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
 
-  }, [parsedUserLocation]);
+  }, [JSON.stringify(userLocation)]);
 
   const handleArrowBack: any = () => {
     setDriverUpdateLocation?.({
@@ -230,6 +236,11 @@ export const DriverMap = (props: GoogleMapsParams) => {
     19: theme.colors.statusOrderBlue,
     20: theme.colors.statusOrderBlue,
     21: theme.colors.statusOrderBlue,
+    22: theme.colors.statusOrderBlue,
+    23: theme.colors.statusOrderBlue,
+    24: theme.colors.statusOrderBlue,
+    25: theme.colors.statusOrderBlue,
+    26: theme.colors.statusOrderBlue,
     //GREEN
     1: theme.colors.statusOrderGreen,
     11: theme.colors.statusOrderGreen,
@@ -250,8 +261,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
         [
           { latitude: location.lat, longitude: location.lng },
           {
-            latitude: parsedInitialPosition.latitude,
-            longitude: parsedInitialPosition.longitude,
+            latitude: parsedInitialPosition()?.latitude,
+            longitude: parsedInitialPosition()?.longitude,
           },
         ],
         {
@@ -264,7 +275,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (parsedInitialPosition.latitude !== 0 && autoFit.current) {
+      if (parsedInitialPosition()?.latitude !== 0 && autoFit.current) {
         if (mapRef.current) {
           fitCoordinates();
           autoFit.current = false;
@@ -272,7 +283,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [parsedInitialPosition]);
+  }, [parsedInitialPosition()]);
 
   const fitCoordinatesZoom = () => {
     following.current = false;
@@ -355,8 +366,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ref={mapRef}
             provider={PROVIDER_GOOGLE}
             initialRegion={{
-              latitude: parsedInitialPosition.latitude,
-              longitude: parsedInitialPosition.longitude,
+              latitude: parsedInitialPosition()?.latitude,
+              longitude: parsedInitialPosition()?.longitude,
               latitudeDelta: 0.001,
               longitudeDelta: 0.001 * ASPECT_RATIO,
             }}
@@ -378,8 +389,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
               <>
                 <Marker
                   coordinate={{
-                    latitude: destination.latitude,
-                    longitude: destination.longitude
+                    latitude: parsedDestination()?.latitude,
+                    longitude: parsedDestination()?.longitude
                   }}
                   title={location.title}>
                   <Icon
@@ -397,8 +408,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
                   </View>
                 </Marker>
                 <Marker coordinate={{
-                  latitude: parsedUserLocation.latitude,
-                  longitude: parsedUserLocation.longitude
+                  latitude: userLocation?.latitude,
+                  longitude: userLocation?.longitude
                 }}>
                   <View style={styles.driverIcon}>
                     <OIcon
@@ -413,8 +424,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ) : (
               <Marker
                 coordinate={{
-                  latitude: parsedUserLocation.latitude,
-                  longitude: parsedUserLocation.longitude
+                  latitude: parsedUserLocation()?.latitude,
+                  longitude: parsedUserLocation()?.longitude
                 }}
                 title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
               />
@@ -526,10 +537,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
               animationIn: 'slideInUp'
             }}
             options={{
-              latitude: destination.latitude,
-              longitude: destination.longitude,
-              sourceLatitude: parsedUserLocation.latitude,
-              sourceLongitude: parsedUserLocation.longitude,
+              latitude: parsedDestination()?.latitude,
+              longitude: parsedDestination()?.longitude,
+              sourceLatitude: parsedUserLocation()?.latitude,
+              sourceLongitude: parsedUserLocation()?.longitude,
               naverCallerName: 'com.deliveryapp',
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),

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

@@ -25,14 +25,15 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
     secondButton,
     widthButton,
     isPadding,
-    isHideRejectButtons
+    isHideRejectButtons,
+    principalButtonColor
   } = props;
 
   const theme = useTheme();
 
   const styles = StyleSheet.create({
     primaryBtn: {
-      backgroundColor: theme.colors.primary,
+      backgroundColor: principalButtonColor ?? theme.colors.primary,
     },
     secodaryBtn: {
       backgroundColor: theme.colors.textSecondary,

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

@@ -49,7 +49,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     },
   });
 
-  return (
+  return !languagesState?.loading && languagesState?.languages?.length > 1 && (
     <Container style={{ backgroundColor: theme.colors.inputChat }}>
       {languagesState?.languages && (
         <CountryPicker

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

@@ -6,6 +6,9 @@ import {
   View,
   Dimensions,
   ScrollView,
+  Platform,
+  NativeModules,
+  Alert as AlertReactNative
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Recaptcha from 'react-native-recaptcha-that-works'
@@ -62,11 +65,12 @@ const LoginFormUI = (props: LoginParams) => {
     enableReCaptcha,
 
     useLoginOtp,
-		otpType,
-		setOtpType,
-		generateOtpCode,
-		useLoginOtpEmail,
-		useLoginOtpCellphone,
+    otpType,
+    setOtpType,
+    generateOtpCode,
+    useLoginOtpEmail,
+    useLoginOtpCellphone,
+    validateDeveloperMode
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -112,7 +116,7 @@ const LoginFormUI = (props: LoginParams) => {
   const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
   const isOtpEmail = loginTab === 'otp' && otpType === 'email'
-	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+  const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
 
 
   const handleOpenRecaptcha = () => {
@@ -229,37 +233,58 @@ const LoginFormUI = (props: LoginParams) => {
 
   const mainLogin = (values) => {
     if (loginTab === 'otp') {
-			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
-				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
-				return
-			}
-			if (loginTab === 'otp') {
-				generateOtpCode({
-					...values,
-					...phoneInputData.phone
-				})
-			}
-			setWillVerifyOtpState(true)
-		} else {
-			if (phoneInputData.error) {
-				showToast(ToastType.Error, phoneInputData.error);
-				return;
-			}
-			handleButtonLoginClick({
-				...values,
-				...phoneInputData.phone,
-			});
-		}
+      if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
+        showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
+        return
+      }
+      if (loginTab === 'otp') {
+        generateOtpCode({
+          ...values,
+          ...phoneInputData.phone
+        })
+      }
+      setWillVerifyOtpState(true)
+    } else {
+      if (phoneInputData.error) {
+        showToast(ToastType.Error, phoneInputData.error);
+        return;
+      }
+      handleButtonLoginClick({
+        ...values,
+        ...phoneInputData.phone,
+      });
+    }
   }
 
-  const onSubmit = (values: any) => {
+  const isDeveloperModeEnabled = async (): Promise<boolean> => {
+    if (Platform.OS === 'android') {
+      return NativeModules.DeveloperOptions?.isDeveloperModeEnabled?.();
+    }
+    return false
+  }
+
+  const onSubmit = async (values: any) => {
     Keyboard.dismiss();
 
     if (phoneInputData.error) {
       showToast(ToastType.Error, phoneInputData.error);
       return;
     }
-
+    if (validateDeveloperMode) {
+      const isDeveloperMode = await isDeveloperModeEnabled()
+      if (isDeveloperMode) {
+        AlertReactNative.alert(
+          t('DEVELOPER_MODE', 'Developer mode'),
+          t('PLEASE_DISABLE_DEVELOPER_MODE', 'Please disable developer mode for sign in'),
+          [{
+            text: t('GO_TO_SETTINGS', 'Go to settings'),
+            onPress: async () => await NativeModules.DeveloperOptions?.openDeveloperSettings(),
+          },
+          { text: 'OK', onPress: () => { } },]
+        )
+        return
+      }
+    }
     if (values?.project_name) {
       setOrdering({
         ...ordering,
@@ -274,21 +299,21 @@ const LoginFormUI = (props: LoginParams) => {
   };
 
   const handleChangeOtpType = (type: string) => {
-		handleChangeTab('otp', type)
-		setOtpType(type)
-	}
-
-	const handleLoginOtp = (code: string) => {
-		handleButtonLoginClick({ code })
-	}
-
-	const closeAlert = () => {
-		setAlertState({
-			open: false,
-			title: '',
-			content: []
-		})
-	}
+    handleChangeTab('otp', type)
+    setOtpType(type)
+  }
+
+  const handleLoginOtp = (code: string) => {
+    handleButtonLoginClick({ code })
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      title: '',
+      content: []
+    })
+  }
 
   const handleVerifyCodeClick = () => {
     if (phoneInputData.error) {
@@ -411,14 +436,14 @@ const LoginFormUI = (props: LoginParams) => {
   }, [ordering, submitted])
 
   useEffect(() => {
-		if (checkPhoneCodeState?.result?.error) {
-			setAlertState({
-				open: true,
-				content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
-				title: ''
-			})
-		}
-	}, [checkPhoneCodeState])
+    if (checkPhoneCodeState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
+        title: ''
+      })
+    }
+  }, [checkPhoneCodeState])
 
   Dimensions.addEventListener('change', ({ window: { width, height } }) => {
     setWindowWidth(
@@ -477,7 +502,7 @@ const LoginFormUI = (props: LoginParams) => {
       borderColor: theme.colors.inputSignup,
       backgroundColor: theme.colors.transparent,
       minHeight: 50,
-      maxHeight : 50
+      maxHeight: 50
     },
     btn: {
       borderRadius: 7.6,
@@ -506,23 +531,23 @@ const LoginFormUI = (props: LoginParams) => {
     },
 
     borderStyleBase: {
-			width: 30,
-			height: 45
-		},
-		borderStyleHighLighted: {
-			borderColor: "#03DAC6",
-		},
-		underlineStyleBase: {
-			width: 45,
-			height: 60,
-			borderWidth: 1,
-			fontSize: 16
-		},
-		underlineStyleHighLighted: {
-			borderColor: theme.colors.primary,
-			color: theme.colors.primary,
-			fontSize: 16
-		},
+      width: 30,
+      height: 45
+    },
+    borderStyleHighLighted: {
+      borderColor: "#03DAC6",
+    },
+    underlineStyleBase: {
+      width: 45,
+      height: 60,
+      borderWidth: 1,
+      fontSize: 16
+    },
+    underlineStyleHighLighted: {
+      borderColor: theme.colors.primary,
+      color: theme.colors.primary,
+      fontSize: 16
+    },
   });
 
   return (
@@ -602,7 +627,7 @@ const LoginFormUI = (props: LoginParams) => {
               )}
 
               {useLoginOtpEmail && (
-								<Pressable
+                <Pressable
                   style={styles.btnTab}
                   onPress={() => handleChangeOtpType('email')}>
                   <OText
@@ -624,10 +649,10 @@ const LoginFormUI = (props: LoginParams) => {
                           : theme.colors.tabBar,
                       borderBottomWidth: 2,
                     }} />
-								</Pressable>
-							)}
-							{useLoginOtpCellphone && (
-								<Pressable
+                </Pressable>
+              )}
+              {useLoginOtpCellphone && (
+                <Pressable
                   style={styles.btnTab}
                   onPress={() => handleChangeOtpType('cellphone')}>
                   <OText
@@ -644,13 +669,13 @@ const LoginFormUI = (props: LoginParams) => {
                     style={{
                       width: '100%',
                       borderBottomColor:
-                      isOtpCellphone
+                        isOtpCellphone
                           ? theme.colors.textGray
                           : theme.colors.tabBar,
                       borderBottomWidth: 2,
                     }} />
-								</Pressable>
-							)}
+                </Pressable>
+              )}
             </TabsContainer>
           </ScrollView>
         </LoginWith>
@@ -908,28 +933,28 @@ const LoginFormUI = (props: LoginParams) => {
         />
       </OModal>
       <OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState(false)}
-				entireModal
+        open={willVerifyOtpState}
+        onClose={() => setWillVerifyOtpState(false)}
+        entireModal
         hideIcons
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
-			>
-				<Otp
-					willVerifyOtpState={willVerifyOtpState}
-					setWillVerifyOtpState={setWillVerifyOtpState}
-					handleLoginOtp={handleLoginOtp}
-					onSubmit={handleLogin}
-					setAlertState={setAlertState}
+        title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+      >
+        <Otp
+          willVerifyOtpState={willVerifyOtpState}
+          setWillVerifyOtpState={setWillVerifyOtpState}
+          handleLoginOtp={handleLoginOtp}
+          onSubmit={handleLogin}
+          setAlertState={setAlertState}
           formState={formState}
-				/>
-			</OModal>
-			<Alert
-				open={alertState.open}
-				content={alertState.content}
-				title={alertState.title || ''}
-				onAccept={closeAlert}
-				onClose={closeAlert}
-			/>
+        />
+      </OModal>
+      <Alert
+        open={alertState.open}
+        content={alertState.content}
+        title={alertState.title || ''}
+        onAccept={closeAlert}
+        onClose={closeAlert}
+      />
     </View>
   );
 };

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

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import { LogoutAction } from 'ordering-components/native';
-import { useLanguage } from 'ordering-components/native';
+import { LogoutAction, ToastType, useToast } from 'ordering-components/native';
+import { useLanguage, useSession } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { _retrieveStoreData, _clearStoreData } from '../../providers/StoreUtil';
 
 const LogoutButtonUI = (props: any) => {
-  const { handleLogoutClick } = props;
+  const { handleLogoutClick, formState } = props;
   const [, t] = useLanguage();
+  const [, { showToast }] = useToast()
   const theme = useTheme();
 
   const handleClick = async () => {
@@ -19,6 +20,12 @@ const LogoutButtonUI = (props: any) => {
     }
   };
 
+  useEffect(() => {
+    if (formState?.result?.error) {
+      showToast(ToastType.Error, t(formState?.result?.result))
+    }
+  }, [formState?.result])
+
   const styles = StyleSheet.create({
     container: {
       alignItems: 'center',
@@ -53,9 +60,11 @@ const LogoutButtonUI = (props: any) => {
 };
 
 export const LogoutButton = (props: any) => {
+  const [{ user }] = useSession()
   const logoutProps = {
     ...props,
     isNative: true,
+    isDriverApp: user?.level === 4,
     UIComponent: LogoutButtonUI,
   };