ordering-ui-react-native 0.22.21 → 0.22.22-release

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';
@@ -11,7 +12,8 @@ import {
   useToast,
   useLanguage,
   useUtils,
-  useConfig
+  useConfig,
+  useValidationFields
 } from 'ordering-components/native';
 import {
   CenterView,
@@ -19,6 +21,7 @@ import {
   UserData,
   EditButton,
   EnabledStatusDriver,
+  RemoveAccount
 } from './styles';
 import { LogoutButton } from '../LogoutButton';
 import { LanguageSelector } from '../LanguageSelector';
@@ -35,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';
@@ -48,6 +53,7 @@ const ProfileUI = (props: ProfileParams) => {
     toggleIsEdit,
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
+    handleRemoveAccount,
     isAlsea,
     isShowDriverStatus,
     navigation
@@ -57,11 +63,13 @@ const ProfileUI = (props: ProfileParams) => {
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const [{ optimizeImage }] = useUtils();
-  const [{ configs }] = useConfig()
+  const [{ configs }] = useConfig();
+  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({
+  const [phoneInputData, setPhoneInputData] = useState<any>({
     error: '',
     phone: {
       country_phone_code: null,
@@ -74,16 +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.cellphone.slice(0, 3);
-      const numberPhone = phoneInputData.phone.cellphone.slice(
-        3,
-        phoneInputData.phone.cellphone?.length,
-      );
-      setPhoneToShow(`(${codeNumberPhone}) ${numberPhone}`);
-    }
-  }, [phoneInputData.phone.cellphone]);
+  const isAdmin = user?.level === 0
 
   const setUserCellPhone = (isEdit = false) => {
     if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
@@ -149,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;
 
@@ -262,15 +283,17 @@ const ProfileUI = (props: ProfileParams) => {
 
   return (
     <>
-      {validationFields?.error && (
+      {validationFields?.error && !loading && (
         <NotFoundSource
           content={
-            validationFields?.error[0] ||
-            validationFields?.error[0]?.message ||
+            validationFields?.error?.[0] ||
+            validationFields?.error?.[0]?.message ||
             t('NETWORK_ERROR', 'Network Error')
           }
           image={theme.images.general.notFound}
           conditioned={false}
+          onClickButton={() => loadOriginalValidationFields({ forceLoading: true })}
+          btnTitle={t('REFRESH_PROFILE', 'Refresh profile')}
         />
       )}
 
@@ -463,7 +486,6 @@ const ProfileUI = (props: ProfileParams) => {
                     />
 
                     <OText style={styles.label}>{t('PHONE', 'Phone')}</OText>
-
                     <OInput
                       isSecured={true}
                       placeholder={
@@ -486,10 +508,11 @@ const ProfileUI = (props: ProfileParams) => {
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
                 isAlsea={isAlsea}
+                allowDriverUpdateData={allowDriverUpdateData}
               />
             </View>
           )}
-          {!validationFields.loading && !isEdit && allowDriverUpdateData && (
+          {!validationFields.loading && !isEdit && (
             <EditButton>
               <OButton
                 text={t('EDIT', 'Edit')}
@@ -516,7 +539,7 @@ const ProfileUI = (props: ProfileParams) => {
               }} />
             </Pressable>
           ) : (
-            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+            <Pressable style={{ marginBottom: 10 }} onPress={() => navigation.navigate('PrinterSetup')}>
               <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                 <OText size={16}>{t('PRINTER_SETTINGS', 'Printer Settings')}</OText>
                 <AntDesignIcon size={18} name='right' />
@@ -544,18 +567,28 @@ 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)}
             entireModal
             hideIcons
           >
-            {props.isBusinessApp ? (
-              <PrinterSettings onClose={() => setOpenModal(false)} />
-            ) : (
+            {!props.isBusinessApp && (
               <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/components/WebsocketStatus/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
-import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import { TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTheme } from 'styled-components/native'
 import RNRestart from 'react-native-restart'
@@ -37,7 +37,7 @@ const SocketStatusUI = (props: any) => {
       paddingLeft: 0,
       paddingRight: 0,
       marginBottom: 30,
-      marginTop: 30
+      marginTop: Platform.OS === 'ios' ? 60 : 30
     },
   })
 

package/themes/business/src/components/shared/OTextarea.tsx

@@ -4,8 +4,10 @@ import { useTheme } from 'styled-components/native';
 
 const Wrapper = styled.View`
   border-radius: 10px;
-  border: 1px solid ${(props: any) => props.theme.colors.lightGray};
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.lightGray};
 `;
+
 const Inner = styled.TextInput`
   height: 100px;
   padding: 5px 10px 5px 10px;
@@ -29,16 +31,13 @@ const OTextarea = (props: Props) => {
         ref={props.textTareaRef}
         onFocus={() => props.onFocus()}
         onChangeText={(txt: any) => props.onChange(txt)}
-        textAlignVertical={'top'}
         placeholder={props.placeholder}
-        placeholderTextColor={theme.colors.arrowColor}
-        numberOfLines={props.lines}
-        underlineColorAndroid={'transparent'}
-        value={props.value}
+				placeholderTextColor={theme.colors.lightGray}
+				numberOfLines={props.lines}
+				underlineColorAndroid={'transparent'}
+				value={props.value}
+				multiline={true}
         autoFocus={props.autoFocus}
-        multiline={true}
-        selectionColor={theme.colors.primary}
-        color={theme.colors.textGray}
       />
     </Wrapper>
   );