ordering-ui-react-native 0.22.19-release → 0.22.20-release

package/package.json

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

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;
 
@@ -545,6 +567,10 @@ const ProfileUI = (props: ProfileParams) => {
 
             <LogoutButton />
           </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)}
@@ -555,6 +581,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/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;

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 ? cellphone.slice(callingCode?.length) : 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,