ordering-ui-react-native 0.21.45 → 0.21.46-release

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

@@ -0,0 +1,363 @@
+import React, { useEffect, useState } from 'react'
+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';
+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, 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 {
+    printer,
+    onClose
+  } = props
+
+  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)
+
+  const styles = StyleSheet.create({
+    icons: {
+      maxWidth: 40,
+      height: 40,
+      padding: 10,
+      alignItems: 'flex-end'
+    },
+    optionIcons: {
+      paddingRight: 10
+    },
+    inputStyle: {
+      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,
+      index: currentPrinter?.index ?? null,
+      type: currentPrinter?.type,
+      ip: currentPrinter?.ip,
+      item: currentPrinter
+    })
+  }
+
+  const onSubmit = () => {
+    handleChangePrinter({ edit: !!printer, isAdd: !printer })
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    currentPrinter?.ip && setValue('ip', currentPrinter?.ip)
+    currentPrinter?.nickname && setValue('nickname', currentPrinter?.nickname)
+  }, [currentPrinter?.type])
+
+  useEffect(() => {
+    setCurrentPrinter(printer)
+  }, [printer])
+
+  return (
+    <SafeAreaView style={{ flex: 1, marginBottom: 20 }}>
+      <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 }}
+          >
+            {t('PRINTER_CONFIGURE', 'Printer Configure')}
+          </OText>
+        </WrapperHeader>
+
+        <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={20}
+              style={{ paddingTop: 0, marginBottom: 10 }}
+            >
+              {`${t('PRINTER_NICKNAME', 'Nickname')}:`}
+            </OText>
+            <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={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({
+                  ...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={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
+                          })
+                        }}
+                      />
+                    )}
+                  />
+                </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/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

@@ -0,0 +1,267 @@
+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 { 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, NoPrintersContainer } from './styles'
+import { OText, OIcon, OModal, OButton } from '../shared'
+import { PrinterEdition } from '../PrinterEdition'
+
+export const PrinterSettings = (props: any) => {
+  const { navigation, onClose } = props
+
+  const [printers, setPrinters] = useState<any>({ list: [] })
+  const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
+  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 styles = StyleSheet.create({
+    icons: {
+      maxWidth: 40,
+      height: 40,
+      padding: 10,
+      alignItems: 'flex-end'
+    },
+    optionIcons: {
+      padding: 8,
+      borderWidth: 1,
+      marginRight: 10,
+      borderRadius: 8,
+    },
+    wIconContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: WIDTH_SCREEN - 40 - 22 - 22 - 10, // screen - margin - icon - icon - marginIcon
+    },
+    wrapperContainer: {
+      flexDirection: 'column',
+    },
+    wrapperIcons: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      marginBottom: 5,
+    },
+    inputStyle: {
+      height: 40,
+      borderWidth: 1,
+      borderRadius: 8,
+    },
+    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 goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const handleClick = async ({ item, type, ip, edit, isAdd, index }: any) => {
+    let _item = 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,
+        ...item,
+        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)
+    }
+
+    setPrinters({ list: _printers })
+    await _setStoreData('printers', _printers)
+    type === 1 && onClose && onClose()
+  }
+
+  const handleAutoPrint = async () => {
+    setAutoPrintEnabled(!autoPrintEnabled)
+    await _setStoreData('auto_print_after_accept_order', !autoPrintEnabled)
+  }
+
+  useEffect(() => {
+    const getStorageData = async () => {
+      const printers = await _retrieveStoreData('printers')
+      const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
+      setPrinters({ list: printers ?? [] })
+      setAutoPrintEnabled(!!autoPrint)
+    }
+
+    getStorageData()
+  }, [])
+
+  return (
+    <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>
+      {!!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 })}
+        />
+      )}
+      <View>
+        {printers.list.map((item: any, i: number) => (
+          <ContainerList
+            key={i}
+            activeOpacity={1}
+          >
+            <View style={styles.wrapperContainer}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  style={styles.wIconContainer}
+                  onPress={() => setOpenModal({ open: true, data: { ...item, index: i} })}
+                >
+                  <SimpleLineIcons
+                    name='printer'
+                    color={theme.colors.textGray}
+                    size={18}
+                    style={{
+                      ...styles.icons,
+                      color: theme.colors.primary
+                    }}
+                  />
+                  <OText
+                    size={18}
+                    color={theme.colors.primary}
+                  >
+                    {item?.nickname ?? item.model}
+                  </OText>
+                </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 }}
+        onClose={() => setOpenModal({ open: false, data: null })}
+      >
+        <PrinterEdition
+          printer={openModal.data}
+          printersList={printers}
+          handleChangePrinter={handleClick}
+          onClose={() => setOpenModal({ open: false, data: null })}
+        />
+      </OModal>
+    </Container>
+  )
+}