ordering-ui-react-native 0.21.81 → 0.21.82-release

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
+import FastImage from 'react-native-fast-image';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
 import { Card, Logo, Information, Header, Badge } from './styles';
@@ -201,6 +202,18 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
         value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
         slug: 'ORDER_DRIVER_ON_WAY',
         percentage: 45
+      },
+      {
+        key: 24,
+        value: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+        slug: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+        percentage: 25
+      },
+      {
+        key: 25,
+        value: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company'),
+        slug: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+        percentage: 25
       }
     ];
 
@@ -284,10 +297,14 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
               activeOpacity={1}>
               <Card key={order?.id}>
                 <Logo style={styles.logo}>
-                  <OIcon
-                    url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                    src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
+                  <FastImage
                     style={styles.icon}
+                    source={order.business?.logo?.includes('https') ? {
+                      uri: order.business?.logo,
+                      priority: FastImage.priority.high,
+                      cache: FastImage.cacheControl.immutable
+                    } : order.business?.logo ?? theme?.images?.dummies?.businessLogo}
+                    resizeMode={FastImage.resizeMode.cover}
                   />
                 </Logo>
                 <Information>

package/themes/business/src/components/PreviousOrders/OrderItem.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, PlatformIOSStatic, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Platform, PlatformIOSStatic, Pressable, StyleSheet, View } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
@@ -47,6 +47,7 @@ export const OrderItem = React.memo((props: any) => {
     timer: configState?.configs?.order_deadlines_enabled?.value === '1',
     slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
   })
+  const showExternalId = configState?.configs?.change_order_id?.value === '1'
 
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
   const platformIOS = Platform as PlatformIOSStatic
@@ -76,7 +77,6 @@ export const OrderItem = React.memo((props: any) => {
       marginLeft: 3,
     },
     title: {
-      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
@@ -84,7 +84,6 @@ export const OrderItem = React.memo((props: any) => {
       color: theme.colors.textGray,
     },
     date: {
-      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -120,7 +119,7 @@ export const OrderItem = React.memo((props: any) => {
     let restHours: string | number = Math.floor(restMinOfTargetedMin / 60)
     let restMins: string | number = restMinOfTargetedMin - 60 * restHours
     // make standard time format
-    day = day === 0 ? '' : day + 'day  '
+    day = day === 0 ? '' : `${day + ' ' + t('DAY', 'day') + ' '}`
     restHours = restHours < 10 ? '0' + restHours : restHours
     restMins = restMins < 10 ? '0' + restMins : restMins
 
@@ -138,8 +137,7 @@ export const OrderItem = React.memo((props: any) => {
   }, [configState.loading])
 
   return (
-    <TouchableOpacity
-      activeOpacity={1}
+    <Pressable
       disabled={order?.locked && isLogisticOrder}
       style={styles.cardButton}
       onPress={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
@@ -155,7 +153,8 @@ export const OrderItem = React.memo((props: any) => {
             style={styles.icon}
             source={order.business?.logo?.includes('https') ? {
               uri: order.business?.logo,
-              priority: FastImage.priority.normal,
+              priority: FastImage.priority.high,
+              cache: FastImage.cacheControl.immutable
             } : order.business?.logo ?? theme?.images?.dummies?.businessLogo}
             resizeMode={FastImage.resizeMode.cover}
           />
@@ -180,24 +179,36 @@ export const OrderItem = React.memo((props: any) => {
               />
             </NotificationIcon>
           )}
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-            <OText
+          <View>
+            {!order?.order_group_id && showExternalId && !order?.order_group && (
+              <OText
+                style={styles.date}
+                color={theme.colors.unselectText}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+              >
+                {`${order?.external_id ?? t('NO_EXTERNAL_ID', 'No external Id ') + t('NO', 'Order No.') + order?.id}` + ' · ' + `${order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })
+                  }`}
+              </OText>
+            )}
+            {!showExternalId && (<OText
               style={styles.date}
               color={theme.colors.unselectText}
               numberOfLines={1}
               adjustsFontSizeToFit
             >
-              {(!!order?.order_group_id && order?.order_group && isLogisticOrder
+              {((!!order?.order_group_id && order?.order_group && isLogisticOrder
                 ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
-                : (t('NO', 'Order No.') + order.id)
-              ) + ' · '}
-              {order?.delivery_datetime_utc
+                : (t('NO', 'Order No.') + order?.id)
+              ) + ' · ' + `${order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}
+                : parseDate(order?.delivery_datetime, { utc: false })}`)}
             </OText>
+            )}
             {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
               <>
-                <OText> · </OText>
                 <OText
                   style={styles.date}
                   color={
@@ -237,6 +248,6 @@ export const OrderItem = React.memo((props: any) => {
           )}
         </Information>
       </Card>
-    </TouchableOpacity>
+    </Pressable>
   )
 }, OrderItemPropsAreEqual)

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

@@ -45,6 +45,8 @@ export const PreviousOrders = (props: any) => {
   const deliveryPickupBtn = props.appTitle?.text?.includes('Delivery') && [3, 8, 18]
   const deliveryStatusCompleteBtn = props.appTitle?.text?.includes('Delivery') && [9, 19, 23]
   const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1' && !isBusinessApp
+  const isEnabledOrderNotReady = configs?.order_not_ready_enabled?.value === '1'
+  const isEnabledFailedPickupDriver = configs?.failed_pickup_by_driver_enabled?.value === '1'
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -242,7 +244,7 @@ export const PreviousOrders = (props: any) => {
                         />
                       </AcceptOrRejectOrderStyle>
                     )}
-                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 && !isHideRejectButtons &&
+                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -330,9 +332,9 @@ export const PreviousOrders = (props: any) => {
                         })}
                       />
                     )}
-                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
+                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && isEnabledFailedPickupDriver && (
                     <AcceptOrRejectOrderStyle>
-                      {!isHideRejectButtons && (
+                      {!isHideRejectButtons && isEnabledOrderNotReady && (
                         <OButton
                           text={t('PICKUP_FAILED', 'Pickup failed')}
                           bgColor={theme.colors.danger100}

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

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react'
+import { useTheme } from 'styled-components/native'
+import { OText } from '../shared'
+
+export const MessageAlert = ({ message, resetMsg }: any) => {
+  const theme = useTheme()
+
+  const [text, setText] = useState(message)
+
+  useEffect(() => {
+    setText(message)
+  }, [message])
+
+  useEffect(() => {
+    if (text) {
+      setTimeout(() => {
+        setText(null)
+        resetMsg()
+      }, 2000);
+    }
+  }, [text])
+
+  return (
+    text ? (
+      <OText
+        size={14}
+        color={theme.colors.danger500}
+      >
+        {text}
+      </OText>
+    ) : null
+  )
+}

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

@@ -0,0 +1,431 @@
+import React, { useEffect, useState } from 'react'
+import { StarPRNT } from 'react-native-star-prnt';
+import { ActivityIndicator, 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'
+
+import { PRINTERS } from './printerList'
+import { MessageAlert } from './MessageAlert'
+
+const printerList = PRINTERS.map(printer => ({
+  ...printer,
+  ip: '',
+  type: 1,
+  nickname: printer.model,
+  portName1: `BT:${printer.model.split(' ')[0]}`,
+  bt: `BT:${printer.model.split(' ')[0]}`
+}))
+
+export const PrinterEdition = (props: any) => {
+  const { printer, onClose } = props
+
+  const HEIGHT_SCREEN = Dimensions.get('window').height
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const { control, setValue, watch } = useForm()
+
+  const [currentPrinter, setCurrentPrinter] = useState(printer)
+  const [discoverPort, setDiscoverPort] = useState({ loading: false, msg: null })
+
+  const watchIp = watch('ip')
+  const watchBt = watch('bt')
+  const watchNickname = watch('nickname')
+  const errorIP = !/^((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 errorBT = !/^[^\n]*$/i.test(watchBt) || !watchBt
+  const isErrorInput = currentPrinter?.type === 2 ? errorIP : errorBT
+  const isErrorNickname = watchNickname && !/^[^\n]*$/i.test(watchNickname)
+
+  const styles = StyleSheet.create({
+    icons: {
+      maxWidth: 40,
+      height: 40,
+      padding: 10,
+      alignItems: 'flex-end'
+    },
+    optionIcons: {
+      paddingRight: 10
+    },
+    inputStyle: {
+      borderWidth: 1,
+      borderRadius: 8,
+      color: theme.colors.arrowColor,
+      borderColor: theme.colors.inputSignup,
+      backgroundColor: theme.colors.transparent,
+      minHeight: 50,
+      maxHeight: 50
+    },
+    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 portDiscovery = async () => {
+    try {
+      setDiscoverPort({ ...discoverPort, loading: true })
+      let printers = await StarPRNT.portDiscovery('Bluetooth');
+
+      if (printers?.length) {
+        setValue('bt', printers[0]?.portName)
+        setCurrentPrinter({
+          ...currentPrinter,
+          ['bt']: printers[0]?.portName
+        })
+      }
+      setTimeout(() => {
+        setDiscoverPort({
+          ...discoverPort,
+          loading: false,
+          msg: !printers?.length
+            ? t('NO_PRINTERS_FOUND', 'No printers found')
+            : null
+        })
+      }, 1000);
+    } catch (e) {
+      setValue('bt', currentPrinter?.portName)
+      setCurrentPrinter({
+        ...currentPrinter,
+        ['bt']: currentPrinter?.portName
+      })
+    }
+  }
+
+  const onSubmit = () => {
+    handleChangePrinter({ edit: !!printer, isAdd: !printer })
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    currentPrinter?.ip && setValue('ip', currentPrinter?.ip)
+    currentPrinter?.bt && setValue('bt', currentPrinter?.bt)
+    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>
+            <View style={{ flexDirection: 'column', marginTop: 30 }}>
+              {currentPrinter?.type === 1 && (
+                <OText
+                  size={14}
+                  color={theme.colors.toastInfo}
+                  style={{ marginBottom: 10 }}
+                >
+                  {t('SEARCH_AVAILABLE_PRINTER_MESSAGE', 'Use the search icon to find an available printer')}
+                </OText>
+              )}
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Controller
+                  control={control}
+                  name={currentPrinter?.type === 2 ? 'ip' : 'bt'}
+                  rules={{
+                    required: currentPrinter?.type === 2
+                      ? t('VALIDATION_ERROR_IP_ADDRESS_REQUIRED', 'Ip address is required')
+                      : t('VALIDATION_ERROR_BLUETOOTH_PORN_REQUIRED', 'Bluetooth port name is required'),
+                    pattern: {
+                      value: currentPrinter?.type === 2
+                        ? /^((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
+                        : /^[a-zA-Z0-9]+$/i,
+                      message: currentPrinter?.type === 2
+                        ? t('INVALID_ERROR_IP_ADDRESS', 'Invalid ip address')
+                        : t('INVALID_ERROR_BLUETOOTH_PORT_NAME', 'Invalid bluetooth port name')
+                    }
+                  }}
+                  defaultValue={currentPrinter?.type === 2 ? currentPrinter?.ip ?? '' : currentPrinter?.bt ?? ''}
+                  render={() => (
+                    <OInput
+                      placeholder={currentPrinter?.type === 2
+                        ? t('IP_ADDRESS', 'Ip address')
+                        : t('BLUETOOTH_PORT', 'Bluetooth port')
+                      }
+                      placeholderTextColor={theme.colors.arrowColor}
+                      style={{
+                        ...styles.inputStyle,
+                        borderColor: isErrorInput ? theme.colors.danger500 : theme.colors.tabBar
+                      }}
+                      value={currentPrinter?.type === 2 ? currentPrinter?.ip ?? '' : currentPrinter?.bt ?? ''}
+                      selectionColor={theme.colors.primary}
+                      color={theme.colors.textGray}
+                      onChange={(value: any) => {
+                        setValue(currentPrinter?.type === 2 ? 'ip' : 'bt', value)
+                        setCurrentPrinter({
+                          ...currentPrinter,
+                          [currentPrinter?.type === 2 ? 'ip' : 'bt']: value
+                        })
+                      }}
+                    />
+                  )}
+                />
+                {currentPrinter?.type === 1 && (
+                  <>
+                    {!discoverPort.loading ? (
+                      <FAIcons
+                        name='search'
+                        size={22}
+                        color={theme.colors.primary}
+                        style={{ marginLeft: 10 }}
+                        onPress={() => portDiscovery()}
+                      />
+                    ) : (
+                      <ActivityIndicator
+                        size="small"
+                        style={{ marginLeft: 10 }}
+                        color={theme.colors.primary}
+                      />
+                    )}
+                  </>
+                )}
+              </View>
+            </View>
+            <OText
+              size={14}
+              color={theme.colors.tabBar}
+              style={{ paddingTop: 5, paddingLeft: 10 }}
+            >
+              {discoverPort.msg ? (
+                <MessageAlert
+                  message={discoverPort.msg}
+                  resetMsg={() => setDiscoverPort({ ...discoverPort, msg: null })}
+                />
+              ) : (
+                `${t('EXAMPLE_SHORT', 'Ex:')} ${currentPrinter?.type === 2 ? '8.8.8.8' : currentPrinter?.portName1}`
+              )}
+            </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 === 1 && !currentPrinter?.bt ||
+          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/printerList.tsx

@@ -0,0 +1,23 @@
+export const PRINTERS = [
+  { model: 'mPOP', emulation: 'StarPRNT', printMode: 'append' },
+  { model: 'FVP10', emulation: 'StarLine', printMode: 'append' },
+  { model: 'TSP100', emulation: 'StarGraphic', printMode: 'appendBitmapText' },
+  { model: 'TSP100IV', emulation: 'StarLine', printMode: 'append' },
+  { model: 'TSP65011', emulation: 'StarLine', printMode: 'append' },
+  { model: 'TSP7001', emulation: 'StarLine', printMode: 'append' },
+  { model: 'TSP80011', emulation: 'StarLine', printMode: 'append' },
+  { model: 'SP700', emulation: 'StarDotImpact', printMode: 'append' },
+  { model: 'SM-S210i', emulation: 'EscPosMobile', printMode: 'append' },
+  { model: 'SM-S220i', emulation: 'EscPosMobile', printMode: 'append' },
+  { model: 'SM-S230i', emulation: 'EscosMobile', printMode: 'append' },
+  { model: 'SM-T300i/T300', emulation: 'EscPosMobile', printMode: 'append' },
+  { model: 'SM-T400i', emulation: 'EscosMobile', printMode: 'append' },
+  { model: 'SM-L200', emulation: 'StarPRNT', printMode: 'append' },
+  { model: 'SM-L300', emulation: 'StarPRNT', printMode: 'append' },
+  { model: 'BSC10', emulation: 'EscPos', bt: 'BT:BSC10', printMode: 'append' },
+  { model: 'SM-S210i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
+  { model: 'SM-S220i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
+  { model: 'SM-S230i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
+  { model: 'SM-T300i/T300 StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
+  { model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
+]