ordering-ui-react-native 0.22.40 → 0.22.41

package/package.json

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

package/themes/business/index.tsx

@@ -29,6 +29,7 @@ import { OrderSummary } from './src/components/OrderSummary';
 import { PhoneInputNumber } from './src/components/PhoneInputNumber';
 import { PreviousMessages } from './src/components/PreviousMessages';
 import { PreviousOrders } from './src/components/PreviousOrders';
+import { PrinterSettings } from './src/components/PrinterSettings';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
 import { ReviewCustomer } from './src/components/ReviewCustomer'
 import { SearchBar } from './src/components/SearchBar';
@@ -103,6 +104,7 @@ export {
   PhoneInputNumber,
   PreviousMessages,
   PreviousOrders,
+  PrinterSettings,
   ProductItemAccordion,
   ReviewCustomer,
   SafeAreaContainerLayout,

package/themes/business/src/components/OrderDetails/Business.tsx

@@ -309,24 +309,26 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setOpenModalForAccept(true);
   };
 
-  const printAction = async (printerSettings: any, commands: any) => {
+  const printAction = async (printerSettings: any, commands: any, showAlert: boolean = true) => {
     try {
       var printResult = await StarPRNT.print(printerSettings?.emulation, commands, printerSettings?.portName);
-      showToast(ToastType.Info, t('ORDER_PRINTED_SUCCESS', 'Order printed'), 1000)
+      showAlert && showToast(ToastType.Info, t('ORDER_PRINTED_SUCCESS', 'Order printed'), 1000)
     } catch (e) {
-      showToast(ToastType.Error, t('ORDER_PRINTED_FAILED', 'Order not printed, connection failed'), 1000)
+      showAlert && showToast(ToastType.Error, t('ORDER_PRINTED_FAILED', 'Order not printed, connection failed'), 1000)
     }
   }
 
   const handleViewSummaryOrder = () => {
     if (printerSettings) {
-      const commands: any = generateCommands({
-        ...order,
-        orderStatus: getOrderStatus(order?.status, t)?.value
-      }, printerSettings?.printMode)
-      commands.push({ appendCutPaper: StarPRNT.CutPaperAction.PartialCutWithFeed })
-
-      printAction(printerSettings, commands)
+      printerSettings.map((printer: any, idx: number) => {
+        const commands: any = generateCommands({
+          ...order,
+          orderStatus: getOrderStatus(order?.status, t)?.value
+        }, printer?.printMode)
+        commands.push({ appendCutPaper: StarPRNT.CutPaperAction.PartialCutWithFeed })
+
+        printAction(printer, commands, idx === printerSettings.length - 1)
+      })
       return
     }
     navigation?.navigate &&
@@ -411,9 +413,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     const getStorageData = async () => {
-    const printer = await _retrieveStoreData('printer')
+    const printers = await _retrieveStoreData('printers')
       const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
-      setPrinterSettings(printer)
+      setPrinterSettings(printers?.length && printers)
       setAutoPrintEnabled(!!autoPrint)
     }
 

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

@@ -0,0 +1,218 @@
+import React, { useEffect, useState } from 'react'
+import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useLanguage } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { useForm, Controller } from 'react-hook-form';
+import FAIcons from 'react-native-vector-icons/FontAwesome'
+import MCIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import {
+  ContainerEdition,
+  BackArrowWrapper,
+  BackArrow,
+  WrapperIcons,
+  WrapperHeader,
+  WrapperIcon
+} from './styles'
+
+import { Container } from '../../layouts/Container'
+import { OText, OInput, OIcon } from '../shared'
+
+export const PrinterEdition = (props: any) => {
+  const {
+    printer,
+    onClose
+  } = props
+
+  const WIDTH_SCREEN = Dimensions.get('window').width
+  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 [currentPrinter, setCurrentPrinter] = useState(printer)
+
+  const styles = StyleSheet.create({
+    icons: {
+      maxWidth: 40,
+      height: 40,
+      padding: 10,
+      alignItems: 'flex-end'
+    },
+    optionIcons: {
+      paddingRight: 10
+    },
+    inputStyle: {
+      height: 40,
+      borderWidth: 1,
+      borderRadius: 8,
+    }
+  })
+
+  const handleChangePrinter = (values: any) => {
+    props.handleChangePrinter({
+      ...values,
+      item: currentPrinter,
+    })
+  }
+
+  const onSubmit = ({ ip }: any) => {
+    handleChangePrinter({ type: 2, ip, edit: true })
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    console.log(currentPrinter, isErrorIp)
+    currentPrinter?.ip && setValue('ip', currentPrinter?.ip)
+  }, [currentPrinter?.type])
+
+  useEffect(() => {
+    setCurrentPrinter(printer)
+  }, [printer])
+
+  return (
+    <Container>
+      <ContainerEdition>
+        <BackArrowWrapper>
+          <BackArrow activeOpacity={1} onPress={() => onClose()}>
+            <OIcon
+              src={theme.images.general.arrow_left}
+              color={theme.colors.textGray}
+            />
+          </BackArrow>
+        </BackArrowWrapper>
+        <WrapperHeader>
+          <SimpleLineIcons
+            name='printer'
+            color={theme.colors.textGray}
+            size={20}
+            style={{
+              ...styles.icons,
+              paddingLeft: 0,
+              color: theme.colors.primary
+            }}
+          />
+          <OText
+            size={22}
+            style={{ paddingTop: 0 }}
+          >
+            {printer.model}
+          </OText>
+        </WrapperHeader>
+
+        <WrapperIcons>
+          <OText
+            size={20}
+            style={{ paddingTop: 0, marginBottom: 10 }}
+          >
+            {`${t('CONNECTION_TYPE', 'Connection type')}:`}
+          </OText>
+          <WrapperIcon
+            activeOpacity={1}
+            style={{
+              borderColor: currentPrinter?.type === 1 ? theme.colors.primary : theme.colors.textGray
+            }}
+            onPress={() => {
+              setCurrentPrinter({ ...printer, type: 1 })
+              handleChangePrinter({ type: 1, ip: null, edit: true })
+            }}
+          >
+            <FAIcons
+              name='bluetooth'
+              size={22}
+              {...(currentPrinter?.type === 1 ? { color: theme.colors.primary } : {})}
+              style={styles.optionIcons}
+            />
+            <OText
+              size={18}
+              style={{ paddingTop: 0 }}
+            >
+              {t('CONNECTION_VIA_BLUETOOTH', 'Via Bluetooth')}
+            </OText>
+          </WrapperIcon>
+          <WrapperIcon
+            activeOpacity={1}
+            style={{
+              borderColor: currentPrinter?.type === 2 ? theme.colors.primary : theme.colors.textGray
+            }}
+            onPress={() => setCurrentPrinter({ ...printer, type: 2 })}
+          >
+            <MCIcons
+              name='access-point-network'
+              size={22}
+              {...(currentPrinter?.type === 2 ? { color: theme.colors.primary } : {})}
+              style={styles.optionIcons}
+            />
+            <OText
+              size={18}
+              style={{ paddingTop: 0 }}
+            >
+              {t('CONNECTION_VIA_LAN', 'Via LAN')}
+            </OText>
+          </WrapperIcon>
+          {currentPrinter?.type === 2 && (
+            <>
+              <View style={{ flexDirection: 'row' }}>
+                <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, paddingRight: 0 }}
+                  />
+                </TouchableOpacity>
+              </View>
+              <OText
+                size={14}
+                color={theme.colors.tabBar}
+                style={{ paddingTop: 5, paddingLeft: 10 }}
+              >
+                {`${t('EXAMPLE_SHORT', 'Ex:')} 8.8.8.8`}
+              </OText>
+            </>
+          )}
+        </WrapperIcons>
+      </ContainerEdition>
+    </Container>
+  )
+}

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

@@ -0,0 +1,61 @@
+import styled from "styled-components/native";
+
+export const ContainerEdition = styled.View`
+  margin-bottom: 50px;
+`
+
+export const BackArrowWrapper = styled.View`
+  align-items: center;
+  flex-direction: row;
+  min-height: 33px;
+`
+
+export const BackArrow = styled.TouchableOpacity`
+  border-width: 0;
+  width: 32px;
+  height: 32px;
+  tint-color: ${(props: any) => props.theme.colors.textGray};
+  background-color: ${(props: any) => props.theme.colors.clear};
+  border-color: ${(props: any) => props.theme.colors.clear};
+  shadow-color: ${(props: any) => props.theme.colors.clear};
+  padding-left: 0;
+  padding-right: 0;
+`
+
+export const WrapperHeader = styled.View`
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+`
+
+export const WrapperIcons = styled.View`
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: 20px;
+`
+
+export const WrapperIcon = styled.TouchableOpacity`
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 8px;
+  border-width: 1px;
+  border-radius: 8px;
+  margin-bottom: 10px;
+`
+
+export const ContainerList = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  padding: 5px 5px 5px 0;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+`
+
+export const EnabledAutoPrint = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0px 10px;
+`;

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 } from './styles'
+import { OText, OIcon, OModal } 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({ open: false, data: null })
 
   const WIDTH_SCREEN = Dimensions.get('window').width
 
   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 - 60 - 10 - 26
     },
     wrapperContainer: {
       flexDirection: 'column',
@@ -63,6 +58,22 @@ export const PrinterSettings = (props: any) => {
     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,
+    },
   })
 
   const printerList = [
@@ -89,32 +100,32 @@ export const PrinterSettings = (props: any) => {
     { model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT400i', type: 1, ip: '', printMode: 'append' },
   ]
 
-  const handleClick = async (item: any, type?: number, ip?: string) => {
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const handleClick = async ({ item, type, ip, edit }: any) => {
     let _item = item
-    if (_item) {
+    let _printers = printers.list
+    const idx = _printers.findIndex((p: any) => p.model === _item.model)
+
+    if (idx !== -1 && !edit) {
+      _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.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,24 +135,23 @@ 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>
@@ -162,118 +172,85 @@ export const PrinterSettings = (props: any) => {
           animationSpeed={200}
         />
       </EnabledAutoPrint>
-      <View style={{ paddingHorizontal: 30 }}>
+      <View>
         {printerList.map((item: any, i: number) => (
-          <Container
+          <ContainerList
             key={i}
             activeOpacity={1}
-            onPress={() => handleClick(item)}
+            onPress={() => handleClick({ item })}
           >
             <View style={styles.wrapperContainer}>
-              <View style={{ flexDirection: 'row' }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <MCIcons
+                  name={printers.list.find((p: any) => p?.model === item.model) ? "checkbox-marked" : "checkbox-blank-outline"}
+                  size={26}
+                  color={theme.colors.primary}
+                  onPress={() => handleClick({ item })}
+                />
                 <TouchableOpacity
                   activeOpacity={1}
                   style={styles.wIconContainer}
-                  onPress={() => handleClick(item)}
+                  onPress={() => handleClick({ item })}
                 >
                   <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: printers.list.find((p: any) => p?.model === item.model)
+                        ? theme.colors.primary
+                        : theme.colors.textGray
+                    }}
                   />
                   <OText
                     size={18}
-                    color={currentPrinter?.model === item.model ? theme.colors.primary : theme.colors.textGray}
+                    color={printers.list.find((p: any) => p?.model === item.model)
+                      ? theme.colors.primary
+                      : theme.colors.textGray
+                    }
                   >
                     {item.model}
                   </OText>
                 </TouchableOpacity>
-                {currentPrinter?.model === item.model && (
+                {!!printers.list.find((p: any) => p?.model === item.model) && (
                   <TouchableOpacity
                     activeOpacity={1}
-                    onPress={() => handleClick(null)}
+                    onPress={() => setOpenModal({
+                      open: true,
+                      data: printers.list.find((p: any) => p?.model === item.model)
+                    })}
                     style={{ width: 40 }}
                   >
                     <FeatherIcon
-                      name='x-circle'
-                      color={theme.colors.danger500}
+                      name='edit'
                       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)}
-                  />
-                  <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)}
-                  />
-                </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>
-                )}
-              </View>
             </View>
-          </Container>
+          </ContainerList>
         ))}
       </View>
-    </ScrollView>
+      <OModal
+        hideIcons
+        entireModal
+        customClose
+        open={openModal.open}
+        style={{
+          paddingTop: 0,
+          marginTop: 0
+        }}
+        onClose={() => setOpenModal({ open: false, data: null })}
+      >
+        <PrinterEdition
+          printer={openModal.data}
+          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,5 @@ export const EnabledAutoPrint = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 30px 10px;
+  padding: 20px 0px 10px;
 `;

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

@@ -63,7 +63,7 @@ const ProfileUI = (props: ProfileParams) => {
   const { errors } = useForm();
   const theme = useTheme();
 
-  const [phoneInputData, setPhoneInputData] = useState({
+  const [phoneInputData, setPhoneInputData] = useState<any>({
     error: '',
     phone: {
       country_phone_code: null,
@@ -78,11 +78,8 @@ const ProfileUI = (props: ProfileParams) => {
   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,
-      );
+      const codeNumberPhone = phoneInputData.phone.country_phone_code
+      const numberPhone = phoneInputData.phone.cellphone
       setPhoneToShow(`(${codeNumberPhone}) ${numberPhone}`);
     }
   }, [phoneInputData.phone.cellphone]);
@@ -467,7 +464,6 @@ const ProfileUI = (props: ProfileParams) => {
                     />
 
                     <OText style={styles.label}>{t('PHONE', 'Phone')}</OText>
-
                     <OInput
                       isSecured={true}
                       placeholder={
@@ -520,7 +516,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' />
@@ -554,9 +550,7 @@ const ProfileUI = (props: ProfileParams) => {
             entireModal
             hideIcons
           >
-            {props.isBusinessApp ? (
-              <PrinterSettings onClose={() => setOpenModal(false)} />
-            ) : (
+            {!props.isBusinessApp && (
               <DriverSchedule schedule={user?.schedule} />
             )}
           </OModal>

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

@@ -26,7 +26,6 @@ import {
 	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-const types = ['food', 'laundry', 'alcohol', 'groceries'];
 
 let BusinessInformation: null | React.ElementType = null
 let BusinessReviews: null | React.ElementType = null
@@ -36,6 +35,7 @@ export const BusinessBasicInformation = (
 ) => {
 	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
 	const { business, loading } = businessState;
+	const types = business?.types && business?.types?.filter(({ enabled }) => (enabled)).map(({ name }) => (name))
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
@@ -146,14 +146,11 @@ export const BusinessBasicInformation = (
 	}
 
 	const getBusinessType = () => {
-		if (Object.keys(business || {}).length <= 0) return t('GENERAL', 'General');
+		if (!types) return t('GENERAL', 'General');
 		const _types: any = [];
 		types.forEach(
-			(type) =>
-				business[type] &&
-				_types.push(
-					t(`BUSINESS_TYPE_${type?.replace(/\s/g, '_')?.toUpperCase()}`, type),
-				),
+			(type: any) =>
+				_types.push(type)
 		);
 		return _types.join(', ');
 	};