ordering-ui-react-native 0.22.36 → 0.22.37-release

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

@@ -1,33 +1,28 @@
 import React, { useEffect, useState } from 'react'
-import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
-import { useForm, Controller } from 'react-hook-form';
+import { StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
 import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
 import FeatherIcon from 'react-native-vector-icons/Feather'
-import MCIcons from 'react-native-vector-icons/MaterialCommunityIcons'
-import FAIcons from 'react-native-vector-icons/FontAwesome'
 import { useTheme } from 'styled-components/native'
 import ToggleSwitch from 'toggle-switch-react-native';
 import { useLanguage } from 'ordering-components/native'
 
 import { _setStoreData, _retrieveStoreData } from '../../providers/StoreUtil'
-import { Container, EnabledAutoPrint } from './styles'
-import { OText, OInput} from '../shared'
+import { Container, ContainerList, EnabledAutoPrint, NoPrintersContainer } from './styles'
+import { OText, OIcon, OModal, OButton } from '../shared'
+import { PrinterEdition } from '../PrinterEdition'
 
 export const PrinterSettings = (props: any) => {
-  const { onClose } = props
+  const { navigation, onClose } = props
 
-  const [currentPrinter, setCurrentPrinter] = useState<any>(null)
+  const [printers, setPrinters] = useState<any>({ list: [] })
   const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
-  const [layoutWidth, setLayoutWidth] = useState<any>({ actionsBtns: 0 })
+  const [openModal, setOpenModal] = useState<any>({ open: false, data: null })
 
   const WIDTH_SCREEN = Dimensions.get('window').width
+  const HEIGHT_SCREEN = Dimensions.get('window').height
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const { handleSubmit, control, setValue, watch } = useForm();
-
-  const watchIp = watch('ip')
-  const isErrorIp = !/^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i.test(watchIp)
 
   const styles = StyleSheet.create({
     icons: {
@@ -45,7 +40,7 @@ export const PrinterSettings = (props: any) => {
     wIconContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      width: WIDTH_SCREEN - 60 - 40
+      width: WIDTH_SCREEN - 40 - 22 - 22 - 10, // screen - margin - icon - icon - marginIcon
     },
     wrapperContainer: {
       flexDirection: 'column',
@@ -60,61 +55,62 @@ export const PrinterSettings = (props: any) => {
       borderWidth: 1,
       borderRadius: 8,
     },
-    label: {
-      color: theme.colors.textGray
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+    titleGroups: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      minHeight: 33,
+    },
+    addButtonText: {
+      color: theme.colors.inputTextColor,
+      fontSize: 16,
+    },
+    addButton: {
+      height: 40,
+      marginTop: 10,
+      borderRadius: 8,
+      marginRight: 10,
+      marginBottom: 10,
     },
   })
 
-  const printerList = [
-    { model: 'mPOP', emulation: 'StarPRNT', portName1: 'BT:mPOP', type: 1, ip: '', printMode: 'append' },
-    { model: 'FVP10', emulation: 'StarLine', portName1: 'BT:FVP10', type: 1, ip: '', printMode: 'append' },
-    { model: 'TSP100', emulation: 'StarGraphic', portName1: 'BT:TSP100', type: 1, ip: '', printMode: 'appendBitmapText' },
-    { model: 'TSP100IV', emulation: 'StarLine', portName1: 'BT:TSP100iv', type: 1, ip: '', printMode: 'append' },
-    { model: 'TSP65011', emulation: 'StarLine', portName1: 'BT:TSP65011', type: 1, ip: '', printMode: 'append' },
-    { model: 'TSP7001', emulation: 'StarLine', portName1: 'BT:TSP7001', type: 1, ip: '', printMode: 'append' },
-    { model: 'TSP80011', emulation: 'StarLine', portName1: 'BT:TSP80011', type: 1, ip: '', printMode: 'append' },
-    { model: 'SP700', emulation: 'StarDotImpact', portName1: 'BT:SP700', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-S210i', emulation: 'EscPosMobile', portName1: 'BT:SMS210i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-S220i', emulation: 'EscPosMobile', portName1: 'BT:SMS220i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-S230i', emulation: 'EscosMobile', portName1: 'BT:SMS230i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-T300i/T300', emulation: 'EscPosMobile', portName1: 'BT:SMT300i/T300', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-T400i', emulation: 'EscosMobile', portName1: 'BT:SMT400i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-L200', emulation: 'StarPRNT', portName1: 'BT:SML200', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-L300', emulation: 'StarPRNT', portName1: 'BT:SML300', type: 1, ip: '', printMode: 'append' },
-    { model: 'BSC10', emulation: 'EscPos', portName1: 'BT:BSC10', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-S210i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS210i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-S220i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS220i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-S230i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS230i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-T300i/T300 StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT300i', type: 1, ip: '', printMode: 'append' },
-    { model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT400i', type: 1, ip: '', printMode: 'append' },
-  ]
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
-  const handleClick = async (item: any, type?: number, ip?: string) => {
+  const handleClick = async ({ item, type, ip, edit, isAdd, index }: any) => {
     let _item = item
-    if (_item) {
+    const action = edit || isAdd
+    let _printers = printers.list
+    const idx = index ?? _printers.findIndex((p: any) => p.model === _item.model)
+
+    if (idx !== -1 && !action) {
+      _printers.splice(idx, 1);
+    } else {
+      const _currentPrinter = _printers.find((p: any) => p.model === _item?.model)
       _item = {
-        ...currentPrinter,
+        ..._currentPrinter,
         ...item,
-        type: type ?? currentPrinter?.type,
-        ip: ip ?? currentPrinter?.ip ?? '',
-        portName: (type ?? currentPrinter?.type) === 1 || !ip
-          ? item.portName1 ?? currentPrinter?.portName1
+        type: type ?? _currentPrinter?.type ?? 1,
+        ip: ip ?? _currentPrinter?.ip ?? '',
+        portName: (type ?? _currentPrinter?.type) === 1 || !ip
+          ? item?.bt ?? item.portName1 ?? _currentPrinter?.portName1
           : `TCP:${ip}`
       }
+      edit ? (_printers[idx] = _item) : _printers.push(_item)
     }
-    setCurrentPrinter(_item)
-    await _setStoreData('printer', _item)
-    type === 1 && onClose && onClose()
-  }
-
-  const onLayout = (event: any, type: string) => {
-    const { width } = event.nativeEvent.layout;
-    setLayoutWidth({ ...layoutWidth, [type]: width })
-  };
 
-  const onSubmit = ({ ip }: any) => {
-    handleClick(currentPrinter, 2, ip)
-    onClose && onClose()
+    setPrinters({ list: _printers })
+    await _setStoreData('printers', _printers)
+    type === 1 && onClose && onClose()
   }
 
   const handleAutoPrint = async () => {
@@ -124,156 +120,148 @@ export const PrinterSettings = (props: any) => {
 
   useEffect(() => {
     const getStorageData = async () => {
-      const printer = await _retrieveStoreData('printer')
+      const printers = await _retrieveStoreData('printers')
       const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
-      setCurrentPrinter(printer)
+      setPrinters({ list: printers ?? [] })
       setAutoPrintEnabled(!!autoPrint)
     }
 
     getStorageData()
   }, [])
 
-  useEffect(() => {
-    currentPrinter?.ip && !isErrorIp && setValue('ip', currentPrinter?.ip)
-  }, [currentPrinter?.type])
-
   return (
-    <ScrollView
-      showsVerticalScrollIndicator={false}
-    >
-      <OText size={24} style={{ paddingLeft: 30 }}>
+    <Container>
+      <View style={styles.titleGroups}>
+        <TouchableOpacity onPress={() => goToBack()} style={styles.btnBackArrow}>
+          <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+        </TouchableOpacity>
+      </View>
+      <OText size={24} style={{ paddingTop: 0 }}>
         {t('PRINTER_SETTINGS', 'Printer Settings')}
       </OText>
-      <EnabledAutoPrint>
-        <View style={{ flex: 1 }}>
-          <OText
-            numberOfLines={2}
-            adjustsFontSizeToFit
-            style={{ ...styles.label, paddingHorizontal: 0 }}>
-            {t('AUTO_PRINT_AFTER_ACCEPTING_ORDER', 'Auto print after accepting order')}
-          </OText>
-        </View>
-        <ToggleSwitch
-          isOn={autoPrintEnabled}
-          onColor={theme.colors.primary}
-          offColor={theme.colors.offColor}
-          size="small"
-          onToggle={() => handleAutoPrint()}
-          animationSpeed={200}
+      {!!printers.list.length && (
+        <EnabledAutoPrint>
+          <View style={{ flex: 1 }}>
+            <OText
+              numberOfLines={2}
+              adjustsFontSizeToFit
+              color={theme.colors.textGray}
+              style={{ paddingHorizontal: 0 }}>
+              {t('AUTO_PRINT_AFTER_ACCEPTING_ORDER', 'Auto print after accepting order')}
+            </OText>
+          </View>
+          <ToggleSwitch
+            isOn={autoPrintEnabled}
+            onColor={theme.colors.primary}
+            offColor={theme.colors.offColor}
+            size="small"
+            onToggle={() => handleAutoPrint()}
+            animationSpeed={200}
+          />
+        </EnabledAutoPrint>
+      )}
+      {!!printers.list.length && (
+        <OButton
+          text={t('ADD_PRINTER', 'Add printer')}
+          imgRightSrc={null}
+          textStyle={styles.addButtonText}
+          style={styles.addButton}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          onClick={() => setOpenModal({ open: true, data: null })}
         />
-      </EnabledAutoPrint>
-      <View style={{ paddingHorizontal: 30 }}>
-        {printerList.map((item: any, i: number) => (
-          <Container
+      )}
+      <View>
+        {printers.list.map((item: any, i: number) => (
+          <ContainerList
             key={i}
             activeOpacity={1}
-            onPress={() => handleClick(item)}
           >
             <View style={styles.wrapperContainer}>
-              <View style={{ flexDirection: 'row' }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                 <TouchableOpacity
                   activeOpacity={1}
                   style={styles.wIconContainer}
-                  onPress={() => handleClick(item)}
+                  onPress={() => setOpenModal({ open: true, data: { ...item, index: i} })}
                 >
                   <SimpleLineIcons
                     name='printer'
                     color={theme.colors.textGray}
                     size={18}
-                    style={{ ...styles.icons, color: currentPrinter?.model === item.model ? theme.colors.primary : theme.colors.textGray }}
+                    style={{
+                      ...styles.icons,
+                      color: theme.colors.primary
+                    }}
                   />
                   <OText
                     size={18}
-                    color={currentPrinter?.model === item.model ? theme.colors.primary : theme.colors.textGray}
+                    color={theme.colors.primary}
                   >
-                    {item.model}
+                    {item?.nickname ?? item.model}
                   </OText>
                 </TouchableOpacity>
-                {currentPrinter?.model === item.model && (
-                  <TouchableOpacity
-                    activeOpacity={1}
-                    onPress={() => handleClick(null)}
-                    style={{ width: 40 }}
-                  >
-                    <FeatherIcon
-                      name='x-circle'
-                      color={theme.colors.danger500}
-                      size={20}
-                      style={styles.icons}
-                    />
-                  </TouchableOpacity>
-                )}
-              </View>
-              <View
-                style={styles.wrapperIcons}
-              >
-                <View style={styles.wrapperIcons} onLayout={(e) => onLayout(e, 'actionsBtns')}>
-                  <FAIcons
-                    name='bluetooth'
-                    size={20}
-                    {...(currentPrinter?.type === 1 && currentPrinter?.model === item.model ? { color: theme.colors.primary } : {})}
-                    style={{ ...styles.optionIcons, borderColor: currentPrinter?.type === 1 && currentPrinter?.model === item.model ? theme.colors.primary : theme.colors.textGray }}
-                    onPress={() => handleClick(item, 1)}
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => setOpenModal({ open: true, data: { ...item, index: i} })}
+                >
+                  <FeatherIcon
+                    name='edit'
+                    size={22}
                   />
-                  <MCIcons
-                    name='access-point-network'
-                    size={20}
-                    {...(currentPrinter?.type === 2 && currentPrinter?.model === item.model ? { color: theme.colors.primary } : {})}
-                    style={{ ...styles.optionIcons, borderColor: currentPrinter?.type === 2 && currentPrinter?.model === item.model ? theme.colors.primary : theme.colors.textGray }}
-                    onPress={() => handleClick(item, 2)}
+                </TouchableOpacity>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => handleClick({ item })}
+                  style={{ marginLeft: 10 }}
+                >
+                  <FeatherIcon
+                    name='trash-2'
+                    size={22}
+                    color={theme.colors.danger500}
                   />
-                </View>
-                {currentPrinter?.type === 2 && currentPrinter?.model === item.model && (
-                  <View style={{ flexDirection: 'row', width: WIDTH_SCREEN - 60 - layoutWidth.actionsBtns }}>
-                    <Controller
-                      control={control}
-                      name={'ip'}
-                      rules={{
-                        required: t('VALIDATION_ERROR_IP_ADDRESS_REQUIRED', 'Ip address is required'),
-                        pattern: {
-                          value: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i,
-                          message: t('INVALID_ERROR_IP_ADDRESS', 'Invalid ip address')
-                        }
-                      }}
-                      defaultValue={currentPrinter?.ip ?? ''}
-                      render={() => (
-                        <OInput
-                          placeholder={t('IP_ADDRESS', 'Ip address')}
-                          placeholderTextColor={theme.colors.arrowColor}
-                          style={{ ...styles.inputStyle, borderColor: isErrorIp ? theme.colors.danger500 : theme.colors.tabBar }}
-                          value={currentPrinter?.ip ?? ''}
-                          selectionColor={theme.colors.primary}
-                          color={theme.colors.textGray}
-                          onChange={(value: any) => {
-                            setValue('ip', value)
-                            setCurrentPrinter({
-                              ...currentPrinter,
-                              ip: value
-                            })
-                          }}
-                        />
-                      )}
-                    />
-                    <TouchableOpacity
-                      activeOpacity={1}
-                      disabled={isErrorIp}
-                      onPress={handleSubmit(onSubmit)}
-                      style={{ width: 40 }}
-                    >
-                      <FeatherIcon
-                        name='save'
-                        size={20}
-                        color={isErrorIp ? theme.colors.tabBar : theme.colors.primary }
-                        style={styles.icons}
-                      />
-                    </TouchableOpacity>
-                  </View>
-                )}
+                </TouchableOpacity>
               </View>
             </View>
-          </Container>
+          </ContainerList>
         ))}
+        {!printers.list.length && (
+          <NoPrintersContainer style={{ height: HEIGHT_SCREEN/2 }}>
+            <OText
+              size={20}
+              color={theme.colors.textGray}
+              numberOfLines={2}
+              adjustsFontSizeToFit
+              style={{ paddingHorizontal: 0, opacity: 0.4 }}
+            >
+              {t('NO_PRINTERS_CONFIGURED', 'No printers configured')}
+            </OText>
+            <OButton
+              text={t('ADD_PRINTER', 'Add printer')}
+              imgRightSrc={null}
+              textStyle={styles.addButtonText}
+              style={styles.addButton}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+              onClick={() => setOpenModal({ open: true, data: null })}
+            />
+          </NoPrintersContainer>
+        )}
       </View>
-    </ScrollView>
+      <OModal
+        hideIcons
+        entireModal
+        customClose
+        open={openModal.open}
+        style={{ paddingTop: 0, marginTop: 0 }}
+        onClose={() => setOpenModal({ open: false, data: null })}
+      >
+        <PrinterEdition
+          printer={openModal.data}
+          printersList={printers}
+          handleChangePrinter={handleClick}
+          onClose={() => setOpenModal({ open: false, data: null })}
+        />
+      </OModal>
+    </Container>
   )
 }

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

@@ -1,6 +1,10 @@
 import styled from "styled-components/native";
 
 export const Container = styled.View`
+  margin-bottom: 50px;
+`
+
+export const ContainerList = styled.View`
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
@@ -13,5 +17,14 @@ export const EnabledAutoPrint = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 30px 10px;
+  padding: 20px 0px 10px;
 `;
+
+export const NoPrintersContainer = styled.View`
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 40px;
+  height: 100%;
+  flex: 1;
+`

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

@@ -22,6 +22,7 @@ import {
 } from './styles';
 import { OText, OAlert } from '../shared';
 import { ProductItemAccordionParams } from '../../types';
+import { getCurrenySymbol } from '../../utils';
 
 export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const {
@@ -160,7 +161,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               }}>
               <View style={{ flexDirection: 'row' }}>
                 <OText size={12} color={theme.colors.textGray}>
-                  {parsePrice(getProductPrice(product), { currency })}
+                  {parsePrice(getProductPrice(product), { currency: getCurrenySymbol(currency) })}
                 </OText>
 
                 {(
@@ -281,7 +282,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                                   suboption.position,
                                 )
                                 : '',
-                            price: parsePrice(suboption.price, { currency }),
+                            price: parsePrice(suboption.price, { currency: getCurrenySymbol(currency) }),
                           })}
                         </OText>
                       </ProductSubOption>

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

@@ -1,3 +1,5 @@
+
+
 import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,

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

@@ -149,10 +149,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5, marginTop: 3 }}
+            style={{ marginRight: 5 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>

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,8 +67,9 @@ 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({
+  const [phoneInputData, setPhoneInputData] = useState<any>({
     error: '',
     phone: {
       country_phone_code: null,
@@ -76,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) {
@@ -151,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;
 
@@ -158,8 +177,8 @@ const ProfileUI = (props: ProfileParams) => {
       if (userState?.result?.error) {
         const messageError =
           userState.result.error || userState.result.error[0];
-        showToast(ToastType.Error, getTraduction(messageError, t));
-      } else {
+          showToast(ToastType.Error, typeof messageError === 'string' ? getTraduction(messageError, t) : t('CANNOT_UPDATE_AVAILABLE_STATE', 'Cannot update available state'));
+        } else {
         showToast(
           ToastType.Success,
           t('AVAILABLE_STATE_IS_UPDATED', 'Available state is updated'),
@@ -467,7 +486,6 @@ const ProfileUI = (props: ProfileParams) => {
                     />
 
                     <OText style={styles.label}>{t('PHONE', 'Phone')}</OText>
-
                     <OInput
                       isSecured={true}
                       placeholder={
@@ -490,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')}
@@ -520,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' />
@@ -548,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;
+`