ordering-ui-react-native 0.23.53 → 0.23.56

package/package.json

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

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

@@ -140,7 +140,8 @@ const NewOrderNotificationUI = (props: any) => {
             location: JSON.stringify({
               location: `{
                 lat: ${location.latitude},
-                lng: ${location.longitude}
+                lng: ${location.longitude},
+                mock: ${location.mocked}
               }`
             })
           }),

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View, StyleSheet, ScrollView, ActivityIndicator, Pressable } from 'react-native';
+import { _retrieveStoreData, _clearStoreData } from '../../providers/StoreUtil';
 import { useForm } from 'react-hook-form';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -20,6 +21,7 @@ import {
   UserData,
   EditButton,
   EnabledStatusDriver,
+  RemoveAccount
 } from './styles';
 import { LogoutButton } from '../LogoutButton';
 import { LanguageSelector } from '../LanguageSelector';
@@ -36,6 +38,8 @@ import {
   OInput,
   OModal,
 } from '../../components/shared';
+import { OAlert } from '../../../../../src/components/shared'
+
 import { sortInputFields, getTraduction } from '../../utils';
 import { ProfileParams } from '../../types';
 import { NotFoundSource } from '../NotFoundSource';
@@ -49,6 +53,7 @@ const ProfileUI = (props: ProfileParams) => {
     toggleIsEdit,
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
+    handleRemoveAccount,
     isAlsea,
     isShowDriverStatus,
     navigation
@@ -62,6 +67,7 @@ const ProfileUI = (props: ProfileParams) => {
   const [{ loading }, { loadOriginalValidationFields }] = useValidationFields()
   const { errors } = useForm();
   const theme = useTheme();
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const [phoneInputData, setPhoneInputData] = useState<any>({
     error: '',
@@ -76,13 +82,7 @@ const ProfileUI = (props: ProfileParams) => {
   const [phoneToShow, setPhoneToShow] = useState('');
   const [openModal, setOpenModal] = useState(false)
   const allowDriverUpdateData = user?.level !== 4 || configs?.allow_driver_update_data?.value === "1"
-  useEffect(() => {
-    if (phoneInputData.phone.cellphone) {
-      const codeNumberPhone = phoneInputData.phone.country_phone_code
-      const numberPhone = phoneInputData.phone.cellphone
-      setPhoneToShow(`(${codeNumberPhone}) ${numberPhone}`);
-    }
-  }, [phoneInputData.phone.cellphone]);
+  const isAdmin = user?.level === 0
 
   const setUserCellPhone = (isEdit = false) => {
     if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
@@ -148,6 +148,28 @@ const ProfileUI = (props: ProfileParams) => {
     });
   };
 
+  const onRemoveAccount = async () => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+      title: t('ACCOUNT_ALERT', 'Account alert'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveAccount && handleRemoveAccount(user?.id)
+        _clearStoreData({ excludedKeys: ['isTutorial', 'language'] });
+        props?.setRootState && props?.setRootState({ isAuth: false, token: null })
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (phoneInputData.phone.cellphone) {
+      const codeNumberPhone = phoneInputData.phone.country_phone_code
+      const numberPhone = phoneInputData.phone.cellphone
+      setPhoneToShow(`(${codeNumberPhone}) ${numberPhone}`);
+    }
+  }, [phoneInputData.phone.cellphone]);
+
   useEffect(() => {
     const isLoadingDriver = userState?.loadingDriver ?? true;
 
@@ -544,6 +566,10 @@ const ProfileUI = (props: ProfileParams) => {
 
             <LogoutButton setRootState={props.setRootState} />
           </Actions>
+          <RemoveAccount disabled={isAdmin} onPress={() => onRemoveAccount()} activeOpacity={0.7}>
+            <AntDesignIcon size={16} name='close' color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
+            <OText size={14} lineHeight={24} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1 }} color={theme.colors.danger500}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+          </RemoveAccount>
           <OModal
             open={openModal}
             onClose={() => setOpenModal(false)}
@@ -554,6 +580,14 @@ const ProfileUI = (props: ProfileParams) => {
               <DriverSchedule schedule={user?.schedule} />
             )}
           </OModal>
+          <OAlert
+            open={confirm.open}
+            title={confirm.title}
+            content={confirm.content}
+            onAccept={confirm.handleOnAccept}
+            onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+            onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+          />
         </ScrollView>
       )}
     </>

package/themes/business/src/components/UserProfileForm/styles.tsx

@@ -34,3 +34,10 @@ export const Actions = styled.View`
   justify-content: space-between;
   align-items: flex-start;
 `;
+
+export const RemoveAccount = styled.TouchableOpacity`
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	margin-bottom: 24px;
+`

package/themes/business/src/hooks/useLocation.tsx

@@ -1,24 +1,26 @@
 import { useEffect, useState, useRef } from 'react';
 import GeoLocation from 'react-native-geolocation-service';
 import { Location } from '../types';
-import {useApi, useSession, useLanguage} from 'ordering-components/native'
+import { useApi, useSession, useLanguage } from 'ordering-components/native'
 
 export const useLocation = () => {
-  const [,t] = useLanguage()
+  const [, t] = useLanguage()
   const [ordering] = useApi()
-  const [{token, user}] = useSession()
+  const [{ token, user }] = useSession()
   const [hasLocation, setHasLocation] = useState(false);
   const [initialPosition, setInitialPosition] = useState<Location>({
     longitude: 0,
     latitude: 0,
     speed: 0,
+    mocked: false
   });
   const [userLocation, setUserLocation] = useState<Location>({
     longitude: 0,
     latitude: 0,
     speed: 0,
+    mocked: false
   });
-  const [newLocation,setNewLocation] = useState<any>({ loading: false, error: null, newLocation: null })
+  const [newLocation, setNewLocation] = useState<any>({ loading: false, error: null, newLocation: null })
   const [routeLines, setRoutesLines] = useState<Location[]>([]);
   const isMounted = useRef(true);
 
@@ -37,7 +39,7 @@ export const useLocation = () => {
         if (!isMounted.current) return;
         setInitialPosition(location);
         setUserLocation(location);
-        setRoutesLines(routes => [...routes, location]);
+        setRoutesLines((routes: any) => [...routes, location]);
         setHasLocation(true);
       })
       .catch(err => console.log(err));
@@ -46,14 +48,15 @@ export const useLocation = () => {
   const getCurrentLocation = (): Promise<Location> => {
     return new Promise((resolve, reject) => {
       GeoLocation.getCurrentPosition(
-        ({ coords }) => {
+        ({ coords, mocked }: any) => {
           resolve({
             latitude: typeof coords.latitude === 'number' && !Number.isNaN(coords.latitude) ? coords.latitude : 0,
             longitude: typeof coords.longitude === 'number' && !Number.isNaN(coords.longitude) ? coords.longitude : 0,
             speed: coords.speed,
+            mocked
           });
         },
-        err => reject({ err }),
+        (err: any) => reject({ err }),
         { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 },
       );
     });
@@ -61,18 +64,19 @@ export const useLocation = () => {
 
   const followUserLocation = () => {
     watchId.current = GeoLocation.watchPosition(
-      ({ coords }) => {
+      ({ coords, mocked }: any) => {
         if (!isMounted.current) return;
         if (typeof coords.latitude !== 'number' || typeof coords.longitude !== 'number') return
         const location: Location = {
           latitude: coords.latitude || 0,
           longitude: coords.longitude || 0,
           speed: coords.speed,
+          mocked
         };
         setUserLocation(location);
-        setRoutesLines(routes => [...routes, location]);
+        setRoutesLines((routes: any) => [...routes, location]);
       },
-      err => console.log(err),
+      (err: any) => console.log(err),
       { enableHighAccuracy: true, distanceFilter: 3 },
     );
   };
@@ -83,14 +87,14 @@ export const useLocation = () => {
 
   const updateDriverPosition = async (newLocation = {}) => {
     try {
-      setNewLocation({...newLocation, loading: true})
+      setNewLocation({ ...newLocation, loading: true })
       const { content: { error, result } } = await ordering.setAccessToken(token).users(user?.id).driverLocations().save(newLocation)
       if (error) {
         setNewLocation({ ...newLocation, loading: false, error: [result[0] || result || t('ERROR_UPDATING_POSITION', 'Error updating position')] })
       } else {
         setNewLocation({ ...newLocation, loading: false, newLocation: { ...newLocation, ...result } })
       }
-    } catch (error : any) {
+    } catch (error: any) {
       setNewLocation({ ...newLocation, loading: false, error: [error?.message || t('NETWORK_ERROR', 'Network Error')] })
     }
   }

package/themes/business/src/types/index.tsx

@@ -43,6 +43,7 @@ export interface ProfileParams {
   navigation?: any;
   isEdit?: boolean;
   formState?: any;
+  setRootState?: any;
   userState?: any;
   toggleIsEdit?: any;
   cleanFormState?: any;
@@ -51,6 +52,7 @@ export interface ProfileParams {
   handleChangeInput?: any;
   handleButtonUpdateClick?: any;
   handleToggleAvalaibleStatusDriver?: any;
+  handleRemoveAccount?: any;
   onNavigationRedirect?: any;
   handlechangeImage?: any;
   validationFields?: any;
@@ -541,6 +543,7 @@ export interface Location {
   latitude: number;
   longitude: number;
   speed: number;
+  mocked?: boolean;
 }
 
 export interface GoogleMapsParams {

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

@@ -40,6 +40,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		open: false,
 		options: []
 	})
+	const isDisableNumberValidation = parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)
 	const countriesWithSubOptions = ['PR']
 	const style = StyleSheet.create({
 		input: {
@@ -74,7 +75,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 				const regex = /^[0-9]*$/
 				const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
 				const validNumber = regex.test(cellphone)
-				if ((!checkValid && formattedNumber?.number) || !validNumber) {
+				if (((!checkValid && formattedNumber?.number) || !validNumber) && !!isDisableNumberValidation) {
 					handleData && handleData({
 						...data,
 						error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
@@ -86,7 +87,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 					error: '',
 					phone: {
 						country_phone_code: callingCode,
-						cellphone: formattedNumber?.number
+						cellphone: !isDisableNumberValidation ? userphoneNumber : formattedNumber?.number
 					}
 				})
 			} else {
@@ -134,7 +135,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		}
 	}
 
-	const handleSelectCallingCode = (option : any) => {
+	const handleSelectCallingCode = (option: any) => {
 		setCountryPhoneSuboptions({
 			open: false,
 			options: []
@@ -167,7 +168,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 					: findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
 				onChangeFormattedText={(text: string) => handleChangeNumber(text)}
 				withDarkTheme
-				onChangeCountry={(country : any) => _changeCountry?.(country)}
+				onChangeCountry={(country: any) => _changeCountry?.(country)}
 				countryPickerProps={{ withAlphaFilter: true }}
 				textContainerStyle={{ ...style.input, ...inputStyle ? inputStyle : {} }}
 				textInputStyle={textStyle}
@@ -202,7 +203,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 						alignItems: 'center'
 					}}
 				>
-					{countryPhoneSuboptions.options.map((option : any) => (
+					{countryPhoneSuboptions.options.map((option: any) => (
 						<Pressable
 							style={{
 								margin: 10,