npm - ordering-ui-react-native - Versions diffs - 0.22.42 → 0.22.43 - Mend

ordering-ui-react-native 0.22.42 → 0.22.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

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

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
+import SelectDropdown from 'react-native-select-dropdown'
 import { useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 import { useForm, Controller } from 'react-hook-form';
@@ -17,7 +18,31 @@ import {
 } from './styles'
 import { Container } from '../../layouts/Container'
-import { OText, OInput, OIcon } from '../shared'
+import { OText, OInput, OIcon, OButton } from '../shared'
+const printerList = [
+  { nickname: 'mPOP', model: 'mPOP', emulation: 'StarPRNT', portName1: 'BT:mPOP', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'FVP10', model: 'FVP10', emulation: 'StarLine', portName1: 'BT:FVP10', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'TSP100', model: 'TSP100', emulation: 'StarGraphic', portName1: 'BT:TSP100', type: 1, ip: '', printMode: 'appendBitmapText' },
+  { nickname: 'TSP100IV', model: 'TSP100IV', emulation: 'StarLine', portName1: 'BT:TSP100iv', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'TSP65011', model: 'TSP65011', emulation: 'StarLine', portName1: 'BT:TSP65011', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'TSP7001', model: 'TSP7001', emulation: 'StarLine', portName1: 'BT:TSP7001', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'TSP80011', model: 'TSP80011', emulation: 'StarLine', portName1: 'BT:TSP80011', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SP700', model: 'SP700', emulation: 'StarDotImpact', portName1: 'BT:SP700', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-S210i', model: 'SM-S210i', emulation: 'EscPosMobile', portName1: 'BT:SMS210i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-S220i', model: 'SM-S220i', emulation: 'EscPosMobile', portName1: 'BT:SMS220i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-S230i', model: 'SM-S230i', emulation: 'EscosMobile', portName1: 'BT:SMS230i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-T300i/T300', model: 'SM-T300i/T300', emulation: 'EscPosMobile', portName1: 'BT:SMT300i/T300', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-T400i', model: 'SM-T400i', emulation: 'EscosMobile', portName1: 'BT:SMT400i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-L200', model: 'SM-L200', emulation: 'StarPRNT', portName1: 'BT:SML200', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-L300', model: 'SM-L300', emulation: 'StarPRNT', portName1: 'BT:SML300', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'BSC10', model: 'BSC10', emulation: 'EscPos', portName1: 'BT:BSC10', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-S210i StarPRNT', model: 'SM-S210i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS210i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-S220i StarPRNT', model: 'SM-S220i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS220i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-S230i StarPRNT', model: 'SM-S230i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS230i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-T300i/T300 StarPRNT', model: 'SM-T300i/T300 StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT300i', type: 1, ip: '', printMode: 'append' },
+  { nickname: 'SM-T400i StarPRNT', model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT400i', type: 1, ip: '', printMode: 'append' },
+]
 export const PrinterEdition = (props: any) => {
   const {
@@ -25,13 +50,15 @@ export const PrinterEdition = (props: any) => {
     onClose
   } = props
-  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 watchNickname = watch('nickname')
   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 isErrorNickname = watchNickname && !/^[a-zA-Z0-9\s]+$/i.test(watchNickname)
   const [currentPrinter, setCurrentPrinter] = useState(printer)
@@ -49,24 +76,36 @@ export const PrinterEdition = (props: any) => {
       height: 40,
       borderWidth: 1,
       borderRadius: 8,
+    },
+    savePrinterBtnText: {
+      color: theme.colors.white,
+      fontSize: 18,
+    },
+    savePrinterBtn: {
+      height: 44,
+      borderRadius: 8,
+      marginHorizontal: 20
     }
   })
   const handleChangePrinter = (values: any) => {
     props.handleChangePrinter({
       ...values,
-      item: currentPrinter,
+      index: currentPrinter?.index ?? null,
+      type: currentPrinter?.type,
+      ip: currentPrinter?.ip,
+      item: currentPrinter
     })
   }
-  const onSubmit = ({ ip }: any) => {
-    handleChangePrinter({ type: 2, ip, edit: true })
+  const onSubmit = () => {
+    handleChangePrinter({ edit: !!printer, isAdd: !printer })
     onClose && onClose()
   }
   useEffect(() => {
-    console.log(currentPrinter, isErrorIp)
     currentPrinter?.ip && setValue('ip', currentPrinter?.ip)
+    currentPrinter?.nickname && setValue('nickname', currentPrinter?.nickname)
   }, [currentPrinter?.type])
   useEffect(() => {
@@ -74,7 +113,8 @@ export const PrinterEdition = (props: any) => {
   }, [printer])
   return (
-    <Container>
+    <SafeAreaView style={{ flex: 1, marginBottom: 20 }}>
+      <Container>
       <ContainerEdition>
         <BackArrowWrapper>
           <BackArrow activeOpacity={1} onPress={() => onClose()}>
@@ -99,120 +139,225 @@ export const PrinterEdition = (props: any) => {
             size={22}
             style={{ paddingTop: 0 }}
           >
-            {printer.model}
+            {t('PRINTER_CONFIGURE', 'Printer Configure')}
           </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}
-            />
+        <SelectDropdown
+          data={printerList}
+          defaultValueByIndex={printerList.findIndex(p => p.model === currentPrinter?.model)}
+          dropdownOverlayColor='transparent'
+          defaultButtonText={t('SELECT_PRINTER', 'Select printer')}
+          buttonTextAfterSelection={item => item.model}
+          rowTextForSelection={item => item.model}
+          renderDropdownIcon={() => dropDownIcon()}
+          buttonStyle={{
+            width: '100%',
+            backgroundColor: theme.colors.primary,
+            borderRadius: 8,
+            flexDirection: 'row-reverse',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            height: 44,
+            marginTop: 20,
+          }}
+          buttonTextStyle={{
+            color: theme.colors.white,
+            fontSize: 18,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.primary,
+            maxHeight: HEIGHT_SCREEN * 0.3
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.disabled,
+            backgroundColor: theme.colors.gray100,
+            height: 40,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 14,
+            width: '100%'
+          }}
+          rowTextStyle={{
+            marginHorizontal: 0,
+            fontSize: 14,
+          }}
+          onSelect={item => setCurrentPrinter(item)}
+        />
+        {!!currentPrinter && (
+          <WrapperIcons>
             <OText
-              size={18}
-              style={{ paddingTop: 0 }}
+              size={20}
+              style={{ paddingTop: 0, marginBottom: 10 }}
             >
-              {t('CONNECTION_VIA_BLUETOOTH', 'Via Bluetooth')}
+              {`${t('PRINTER_NICKNAME', 'Nickname')}:`}
             </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}
+            <Controller
+              control={control}
+              name={'nickname'}
+              rules={{
+                pattern: {
+                  value: /^[a-zA-Z0-9\s]+$/i,
+                  message: t('INVALID_ERROR_PRINTER_NICKNAME', 'Invalid Nickname')
+                }
+              }}
+              defaultValue={currentPrinter?.ip ?? ''}
+              render={() => (
+                <OInput
+                  placeholder={`${t('EXAMPLE_SHORT', 'Ex:')} ${t('NICKNAME_EXAMPLE_TEXT', 'Kitchen printer')}`}
+                  placeholderTextColor={theme.colors.arrowColor}
+                  style={{
+                    ...styles.inputStyle,
+                    borderColor: isErrorNickname ? theme.colors.danger500 : theme.colors.tabBar,
+                    marginBottom: 10
+                  }}
+                  value={currentPrinter?.nickname ?? ''}
+                  selectionColor={theme.colors.primary}
+                  color={theme.colors.textGray}
+                  onChange={(value: any) => {
+                    setValue('nickname', value)
+                    setCurrentPrinter({
+                      ...currentPrinter,
+                      nickname: value
+                    })
+                  }}
+                />
+              )}
             />
             <OText
-              size={18}
-              style={{ paddingTop: 0 }}
+              size={20}
+              style={{ paddingTop: 0, marginBottom: 10 }}
             >
-              {t('CONNECTION_VIA_LAN', 'Via LAN')}
+              {`${t('CONNECTION_TYPE', 'Connection type')}:`}
             </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>
+            <WrapperIcon
+              activeOpacity={1}
+              style={{
+                borderColor: currentPrinter?.type === 1 ? theme.colors.primary : theme.colors.textGray
+              }}
+              onPress={() => {
+                setCurrentPrinter({
+                  ...currentPrinter,
+                  type: 1,
+                  ip: '',
+                  portName: currentPrinter?.portName1
+                })
+              }}
+            >
+              <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({ ...currentPrinter, type: 2 })}
+            >
+              <MCIcons
+                name='access-point-network'
+                size={22}
+                {...(currentPrinter?.type === 2 ? { color: theme.colors.primary } : {})}
+                style={styles.optionIcons}
+              />
               <OText
-                size={14}
-                color={theme.colors.tabBar}
-                style={{ paddingTop: 5, paddingLeft: 10 }}
+                size={18}
+                style={{ paddingTop: 0 }}
               >
-                {`${t('EXAMPLE_SHORT', 'Ex:')} 8.8.8.8`}
+                {t('CONNECTION_VIA_LAN', 'Via LAN')}
               </OText>
-            </>
-          )}
-        </WrapperIcons>
+            </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
+                          })
+                        }}
+                      />
+                    )}
+                  />
+                </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>
+    <View>
+      <OButton
+        text={t('SAVE_PRINTER', 'Save Printer')}
+        imgRightSrc={null}
+        textStyle={styles.savePrinterBtnText}
+        style={styles.savePrinterBtn}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        isDisabled={
+          isErrorNickname ||
+          !currentPrinter?.model ||
+          currentPrinter?.type === 2 && !currentPrinter?.ip
+        }
+        onClick={() => onSubmit()}
+      />
+    </View>
+    </SafeAreaView>
+  )
+}
+const dropDownIcon = () => {
+  const theme = useTheme()
+  return (
+    <FeatherIcon
+      name='chevron-down'
+      size={20}
+      color={theme.colors.white}
+    />
   )
 }

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

@@ -2,14 +2,13 @@ import React, { useEffect, useState } from 'react'
 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 { 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, ContainerList, EnabledAutoPrint } from './styles'
-import { OText, OIcon, OModal } 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) => {
@@ -17,9 +16,10 @@ export const PrinterSettings = (props: any) => {
   const [printers, setPrinters] = useState<any>({ list: [] })
   const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
-  const [openModal, setOpenModal] = useState({ open: false, data: null })
+  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()
@@ -40,7 +40,7 @@ export const PrinterSettings = (props: any) => {
     wIconContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      width: WIDTH_SCREEN - 60 - 10 - 26
+      width: WIDTH_SCREEN - 40 - 22 - 22 - 10, // screen - margin - icon - icon - marginIcon
     },
     wrapperContainer: {
       flexDirection: 'column',
@@ -55,9 +55,6 @@ export const PrinterSettings = (props: any) => {
       borderWidth: 1,
       borderRadius: 8,
     },
-    label: {
-      color: theme.colors.textGray
-    },
     btnBackArrow: {
       borderWidth: 0,
       width: 32,
@@ -74,40 +71,28 @@ export const PrinterSettings = (props: any) => {
       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, type, ip, edit }: any) => {
+  const handleClick = async ({ item, type, ip, edit, isAdd, index }: any) => {
     let _item = item
+    const action = edit || isAdd
     let _printers = printers.list
-    const idx = _printers.findIndex((p: any) => p.model === _item.model)
+    const idx = index ?? _printers.findIndex((p: any) => p.model === _item.model)
-    if (idx !== -1 && !edit) {
+    if (idx !== -1 && !action) {
       _printers.splice(idx, 1);
     } else {
       const _currentPrinter = _printers.find((p: any) => p.model === _item?.model)
@@ -154,43 +139,50 @@ export const PrinterSettings = (props: any) => {
       <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>
-        {printerList.map((item: any, i: number) => (
+        {printers.list.map((item: any, i: number) => (
           <ContainerList
             key={i}
             activeOpacity={1}
-            onPress={() => handleClick({ item })}
           >
             <View style={styles.wrapperContainer}>
               <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={() => setOpenModal({ open: true, data: { ...item, index: i} })}
                 >
                   <SimpleLineIcons
                     name='printer'
@@ -198,55 +190,74 @@ export const PrinterSettings = (props: any) => {
                     size={18}
                     style={{
                       ...styles.icons,
-                      color: printers.list.find((p: any) => p?.model === item.model)
-                        ? theme.colors.primary
-                        : theme.colors.textGray
+                      color: theme.colors.primary
                     }}
                   />
                   <OText
                     size={18}
-                    color={printers.list.find((p: any) => p?.model === item.model)
-                      ? theme.colors.primary
-                      : theme.colors.textGray
-                    }
+                    color={theme.colors.primary}
                   >
-                    {item.model}
+                    {item?.nickname ?? item.model}
                   </OText>
                 </TouchableOpacity>
-                {!!printers.list.find((p: any) => p?.model === item.model) && (
-                  <TouchableOpacity
-                    activeOpacity={1}
-                    onPress={() => setOpenModal({
-                      open: true,
-                      data: printers.list.find((p: any) => p?.model === item.model)
-                    })}
-                    style={{ width: 40 }}
-                  >
-                    <FeatherIcon
-                      name='edit'
-                      size={20}
-                      style={styles.icons}
-                    />
-                  </TouchableOpacity>
-                )}
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => setOpenModal({ open: true, data: { ...item, index: i} })}
+                >
+                  <FeatherIcon
+                    name='edit'
+                    size={22}
+                  />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => handleClick({ item })}
+                  style={{ marginLeft: 10 }}
+                >
+                  <FeatherIcon
+                    name='trash-2'
+                    size={22}
+                    color={theme.colors.danger500}
+                  />
+                </TouchableOpacity>
               </View>
             </View>
           </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>
       <OModal
         hideIcons
         entireModal
         customClose
         open={openModal.open}
-        style={{
-          paddingTop: 0,
-          marginTop: 0
-        }}
+        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 })}
         />

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

@@ -19,3 +19,12 @@ export const EnabledAutoPrint = styled.View`
   align-items: center;
   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;
+`