ordering-ui-react-native 0.22.1 → 0.22.3

package/package.json

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

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

@@ -48,7 +48,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages,
     messagesReadList,
     handleAssignDriver,
-    handleChangeOrderStatus,
     isFromCheckout,
     driverLocation,
     actions,
@@ -76,6 +75,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [openModalForMapView, setOpenModalForMapView] = useState(false);
   const [isDriverModalVisible, setIsDriverModalVisible] = useState(false);
   const [printerSettings, setPrinterSettings] = useState('')
+  const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -126,6 +126,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }
 
+  const handleChangeOrderStatus = async (status: any, isAcceptOrReject: any = {}) => {
+    if (props.handleChangeOrderStatus) {
+      const order: any = await props.handleChangeOrderStatus(status, isAcceptOrReject)
+
+      if (order?.status !== 0 && autoPrintEnabled && printerSettings) {
+        handleViewSummaryOrder()
+      }
+    }
+  }
+
   const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
     if (name !== 'No') {
       const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
@@ -412,12 +422,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [driverLocation]);
 
   useEffect(() => {
-    const getPrinterDefault = async () => {
-      const printer = await _retrieveStoreData('printer')
+    const getStorageData = async () => {
+    const printer = await _retrieveStoreData('printer')
+      const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
       setPrinterSettings(printer)
+      setAutoPrintEnabled(!!autoPrint)
     }
 
-    getPrinterDefault()
+    getStorageData()
   }, [])
 
   const styles = StyleSheet.create({

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

@@ -50,20 +50,17 @@ export const usePrinterCommands = () => {
   const generateCommands = (order: any) => {
     let commands: any = [];
 
-    const textProps = {
-      fontSize: 12,
-      absolutePosition: 40
-    }
+    const textProps = { fontSize: 12 }
 
     const generateProductsText = () => {
       const list: any = []
 
       if (order?.products.length) {
         order?.products.map((product: any) => {
-          list.push(`${product?.quantity}  ${product?.name} \t\t\t ${parsePrice(product.total ?? getProductPrice(product))}`)
+          list.push(`${product?.quantity}  ${product?.name} \t\t ${parsePrice(product.total ?? getProductPrice(product))}`)
 
           product.options?.map((option: any) => {
-            list.push(`\t ${option.name}`)
+            list.push({ text: `\t ${option.name}`, props: { fontSize: 10 } })
 
             option.suboptions?.map((suboption: any) => {
               const { quantity, name, position, price } = suboption
@@ -74,16 +71,16 @@ export const usePrinterCommands = () => {
                   : `${quantity} x ${name} +${parsePrice(price)}`
                 : 'No'
 
-              list.push(`\t\t ${string}`)
+              list.push({ text: `\t\t ${string}`, props: { fontSize: 10 } })
             })
           })
 
           if (product.comment) {
-            list.push(`\t ${t('COMMENT', 'Comment')}`)
-            list.push(`\t\t ${product.comment}`)
+            list.push({ text: `\t ${t('COMMENT', 'Comment')}`, props: { fontSize: 10 } })
+            list.push({ text: `\t\t ${product.comment}`, props: { fontSize: 10 } })
           }
 
-          list.push('------------------------------------------------',)
+          list.push('_separator_')
         })
       }
 
@@ -91,14 +88,14 @@ export const usePrinterCommands = () => {
     }
 
     const appends: any = [
-      `${t('ORDER_NO', 'Order No.')} ${order.id}`,
-      '\n', // need to replace with other break line command
+      { text: `${t('ORDER_NO', 'Order No.')} ${order.id}`, props: { fontSize: 16 } },
+      ' ',
       order.orderStatus,
-      `${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]}`,
+      { text: `${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]}`, props: { fontSize: 14 } },
+      { text: `${t(`PAYMENT_METHOD${paymethodsLength(order) > 1 ? 'S' : ''}`, `Payment method${paymethodsLength(order) > 1 ? 's' : ''}`)}: ${handlePaymethodsListString(order)}`, props: { fontSize: 14 } },
       `${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}`,
-      `${t(`PAYMENT_METHOD${paymethodsLength(order) > 1 ? 'S' : ''}`, `Payment method${paymethodsLength(order) > 1 ? 's' : ''}`)}: ${handlePaymethodsListString(order)}`,
-      '\n', // need to replace with other break line command
-      `${t('CUSTOMER_DETAILS', 'Customer details')}`,
+      '_separator_',
+      { text: `${t('CUSTOMER_DETAILS', 'Customer details')}`, props: { fontSize: 14 } },
       `${t('FULL_NAME', 'Full Name')}: ${customerName(order)}`,
       `${t('EMAIL', 'Email')}: ${order?.customer?.email}`,
       `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}`,
@@ -106,31 +103,41 @@ export const usePrinterCommands = () => {
       `${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address}`,
       `${!!order?.customer?.internal_number ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}` : '\n'}`,
       `${!!order?.customer?.zipcode ? `${t('ZIPCODE', 'Zipcode')}: ${order?.customer?.zipcode}` : '\n'}`,
-      '\n', // need to replace with other break line command
-      `${t('BUSINESS_DETAILS', 'Business details')}`,
+      '_separator_',
+      { text: `${t('BUSINESS_DETAILS', 'Business details')}`, props: { fontSize: 14 } },
       order?.business?.name,
       order?.business?.email,
       `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone}`,
       `${!!order?.business?.phone ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone}` : '\n'}`,
       `${t('ADDRESS', 'Address')}: ${order?.business?.address}`,
       `${!!order?.business?.address_notes ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes}` : '\n'}`,
-      '\n', // need to replace with other break line command
-      `${t('ORDER_DETAILS', 'Order Details')}`,
+      '_separator_',
+      { text: `${t('ORDER_DETAILS', 'Order Details')}`, props: { fontSize: 14 } },
       ...generateProductsText(),
-      '\n', // need to replace with other break line command
-      `${t('SUBTOTAL', 'Subtotal')} \t\t\t ${parsePrice(order.tax_type === 1 ? (order?.summary?.subtotal + order?.summary?.tax) ?? 0 : order?.summary?.subtotal ?? 0)}`,
-      `${order?.summary?.discount > 0 ? `${order?.offer_type === 1 ? `${t('DISCOUNT', 'Discount')} (${verifyDecimals(order?.offer_rate, parsePrice)}%)` : t('DISCOUNT', 'Discount')} \t\t\t ${parsePrice(order?.summary?.discount)}` : '\n'}`,
-      `${order?.tax_type !== 1 ? `${t('TAX', 'Tax')} (${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%) \t\t\t ${parsePrice(order?.summary?.tax ?? 0)}` : '\n'}`,
-      `${order?.summary?.delivery_price > 0 ? `${t('DELIVERY_FEE', 'Delivery Fee')} \t\t\t ${parsePrice(order?.summary?.delivery_price ?? 0)}` : '\n'}`,
-      `${t('DRIVER_TIP', 'Driver tip')} ${percentTip(order) ? `(${percentTip(order)}%)` : ''} \t\t\t ${parsePrice(order?.summary?.driver_tip ?? 0)}`,
-      `${t('SERVICE_FEE', 'Service Fee')} (${verifyDecimals(order?.summary?.service_fee, parseNumber)}%) \t\t\t ${parsePrice(order?.summary?.service_fee ?? 0)}`,
-      '------------------------------------------------',
-      `${t('TOTAL', 'Total')} \t\t\t ${parsePrice(order?.summary?.total ?? 0)}`
+      ' ',
+      `${t('SUBTOTAL', 'Subtotal')} \t\t ${parsePrice(order.tax_type === 1 ? (order?.summary?.subtotal + order?.summary?.tax) ?? 0 : order?.summary?.subtotal ?? 0)}`,
+      `${order?.summary?.discount > 0 ? `${order?.offer_type === 1 ? `${t('DISCOUNT', 'Discount')} (${verifyDecimals(order?.offer_rate, parsePrice)}%)` : t('DISCOUNT', 'Discount')} \t\t ${parsePrice(order?.summary?.discount)}` : '\n'}`,
+      `${order?.tax_type !== 1 ? `${t('TAX', 'Tax')} (${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%) \t\t ${parsePrice(order?.summary?.tax ?? 0)}` : '\n'}`,
+      `${order?.summary?.delivery_price > 0 ? `${t('DELIVERY_FEE', 'Delivery Fee')} \t\t ${parsePrice(order?.summary?.delivery_price ?? 0)}` : '\n'}`,
+      `${t('DRIVER_TIP', 'Driver tip')} ${percentTip(order) ? `(${percentTip(order)}%)` : ''} \t\t ${parsePrice(order?.summary?.driver_tip ?? 0)}`,
+      `${t('SERVICE_FEE', 'Service Fee')} (${verifyDecimals(order?.summary?.service_fee, parseNumber)}%) \t\t ${parsePrice(order?.summary?.service_fee ?? 0)}`,
+      '_separator_',
+      `${t('TOTAL', 'Total')} \t\t ${parsePrice(order?.summary?.total ?? 0)}`,
+      ' ',
+      ' ',
     ]
 
     commands = [
       ...commands,
-      ...appends.map((append: any) => ({ appendBitmapText: append, ...textProps }))
+      ...appends.map((append: any) => {
+        return append === '_separator_'
+          ? { appendBitmapText: '---------------------------------------' }
+          : {
+            appendBitmapText: append?.text ?? append,
+            ...textProps,
+            ...append?.props
+          }
+      })
     ]
 
     return commands

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

@@ -1,21 +1,33 @@
 import React, { useEffect, useState } from 'react'
-import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
+import { useForm, Controller } from 'react-hook-form';
 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 } from './styles'
-import { OText } from '../shared'
+import { Container, EnabledAutoPrint } from './styles'
+import { OText, OInput} from '../shared'
 
 export const PrinterSettings = (props: any) => {
   const { onClose } = props
 
   const [currentPrinter, setCurrentPrinter] = useState<any>(null)
+  const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
+  const [layoutWidth, setLayoutWidth] = useState<any>({ actionsBtns: 0 })
+
+  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: {
@@ -24,46 +36,106 @@ export const PrinterSettings = (props: any) => {
       padding: 10,
       alignItems: 'flex-end'
     },
+    optionIcons: {
+      padding: 8,
+      borderWidth: 1,
+      marginRight: 10,
+      borderRadius: 8,
+    },
+    wIconContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: WIDTH_SCREEN - 60 - 40
+    },
+    wrapperContainer: {
+      flexDirection: 'column',
+    },
+    wrapperIcons: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      marginBottom: 5,
+    },
+    inputStyle: {
+      height: 40,
+      borderWidth: 1,
+      borderRadius: 8,
+    },
+    label: {
+      color: theme.colors.textGray
+    },
   })
 
   const printerList = [
-    { model: 'mPOP', emulation: 'StarPRNT', portName: 'BT:TSP100' },
-    { model: 'FVP10', emulation: 'StarLine', portName: 'BT:TSP100' },
-    { model: 'TSP100', emulation: 'StarGraphic', portName: 'BT:TSP100' },
-    { model: 'TSP65011', emulation: 'StarLine', portName: 'BT:TSP100' },
-    { model: 'TSP7001', emulation: 'StarLine', portName: 'BT:TSP100' },
-    { model: 'TSP80011', emulation: 'StarLine', portName: 'BT:TSP100' },
-    { model: 'SP700', emulation: 'StarDotimpact', portName: 'BT:TSP100' },
-    { model: 'SM-S210i', emulation: 'EscPosMobile', portName: 'BT:TSP100' },
-    { model: 'SM-S220i', emulation: 'EscPosMobile', portName: 'BT:TSP100' },
-    { model: 'SM-S230i', emulation: 'EscosMobile', portName: 'BT:TSP100' },
-    { model: 'SM-T300i/T300', emulation: 'EscPosMobile', portName: 'BT:TSP100' },
-    { model: 'SM-T400i', emulation: 'EscosMobile', portName: 'BT:TSP100' },
-    { model: 'SM-L200', emulation: 'StarPRNT', portName: 'BT:TSP100' },
-    { model: 'SM-L300', emulation: 'StarPRNT', portName: 'BT:TSP100' },
-    { model: 'BSC10', emulation: 'EscPos', portName: 'BT:TSP100' },
-    { model: 'SM-S210i StarPRNT', emulation: 'StarPRNT', portName: 'BT:TSP100' },
-    { model: 'SM-S220i StarPRNT', emulation: 'StarPRNT', portName: 'BT:TSP100' },
-    { model: 'SM-S230i StarPRNT', emulation: 'StarPRNT', portName: 'BT:TSP100' },
-    { model: 'SM-T300i/T300 StarPRNT', emulation: 'StarPRNT', portName: 'BT:TSP100' },
-    { model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', portName: 'BT:TSP100' },
+    { model: 'mPOP', emulation: 'StarPRNT', portName1: 'BT:mPOP', type: 1, ip: '' },
+    { model: 'FVP10', emulation: 'StarLine', portName1: 'BT:FVP10', type: 1, ip: '' },
+    { model: 'TSP100', emulation: 'StarGraphic', portName1: 'BT:TSP100', type: 1, ip: '' },
+    { model: 'TSP65011', emulation: 'StarLine', portName1: 'BT:TSP65011', type: 1, ip: '' },
+    { model: 'TSP7001', emulation: 'StarLine', portName1: 'BT:TSP7001', type: 1, ip: '' },
+    { model: 'TSP80011', emulation: 'StarLine', portName1: 'BT:TSP80011', type: 1, ip: '' },
+    { model: 'SP700', emulation: 'StarDotimpact', portName1: 'BT:SP700', type: 1, ip: '' },
+    { model: 'SM-S210i', emulation: 'EscPosMobile', portName1: 'BT:SMS210i', type: 1, ip: '' },
+    { model: 'SM-S220i', emulation: 'EscPosMobile', portName1: 'BT:SMS220i', type: 1, ip: '' },
+    { model: 'SM-S230i', emulation: 'EscosMobile', portName1: 'BT:SMS230i', type: 1, ip: '' },
+    { model: 'SM-T300i/T300', emulation: 'EscPosMobile', portName1: 'BT:SMT300i/T300', type: 1, ip: '' },
+    { model: 'SM-T400i', emulation: 'EscosMobile', portName1: 'BT:SMT400i', type: 1, ip: '' },
+    { model: 'SM-L200', emulation: 'StarPRNT', portName1: 'BT:SML200', type: 1, ip: '' },
+    { model: 'SM-L300', emulation: 'StarPRNT', portName1: 'BT:SML300', type: 1, ip: '' },
+    { model: 'BSC10', emulation: 'EscPos', portName1: 'BT:BSC10', type: 1, ip: '' },
+    { model: 'SM-S210i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS210i', type: 1, ip: '' },
+    { model: 'SM-S220i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS220i', type: 1, ip: '' },
+    { model: 'SM-S230i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS230i', type: 1, ip: '' },
+    { model: 'SM-T300i/T300 StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT300i', type: 1, ip: '' },
+    { model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT400i', type: 1, ip: '' },
   ]
 
-  const handleClick = async (item: any) => {
-    setCurrentPrinter(item)
-    await _setStoreData('printer', item)
+  const handleClick = async (item: any, type?: number, ip?: string) => {
+    let _item = item
+    if (_item) {
+      _item = {
+        ...currentPrinter,
+        ...item,
+        type: type ?? currentPrinter?.type,
+        ip: ip ?? currentPrinter?.ip,
+        portName: (type ?? currentPrinter?.type) === 1 || !ip
+          ? currentPrinter?.portName1 ?? item.portName1
+          : `TCP:${ip}`
+      }
+    }
+    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()
   }
 
+  const handleAutoPrint = async () => {
+    setAutoPrintEnabled(!autoPrintEnabled)
+    await _setStoreData('auto_print_after_accept_order', !autoPrintEnabled)
+  }
+
   useEffect(() => {
-    const getPrinterDefault = async () => {
+    const getStorageData = async () => {
       const printer = await _retrieveStoreData('printer')
+      const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
       setCurrentPrinter(printer)
+      setAutoPrintEnabled(!!autoPrint)
     }
 
-    getPrinterDefault()
+    getStorageData()
   }, [])
 
+  useEffect(() => {
+    currentPrinter?.ip && !isErrorIp && setValue('ip', currentPrinter?.ip)
+  }, [currentPrinter?.type])
+
   return (
     <ScrollView
       showsVerticalScrollIndicator={false}
@@ -71,44 +143,133 @@ export const PrinterSettings = (props: any) => {
       <OText size={24} style={{ paddingLeft: 30 }}>
         {t('PRINTER_SETTINGS', 'Printer Settings')}
       </OText>
-      <View style={{ padding: 30 }}>
+      <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}
+        />
+      </EnabledAutoPrint>
+      <View style={{ paddingHorizontal: 30 }}>
         {printerList.map((item: any, i: number) => (
           <Container
             key={i}
             activeOpacity={1}
             onPress={() => handleClick(item)}
           >
-            <TouchableOpacity
-              activeOpacity={1}
-              style={{ flexDirection: 'row', alignItems: 'center' }}
-              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 }}
-              />
-              <OText
-                size={18}
-                color={currentPrinter?.model === item.model ? theme.colors.primary : theme.colors.textGray}
-              >
-                {item.model}
-              </OText>
-            </TouchableOpacity>
-            {currentPrinter?.model === item.model && (
-              <TouchableOpacity
-                activeOpacity={1}
-                onPress={() => handleClick(null)}
+            <View style={styles.wrapperContainer}>
+              <View style={{ flexDirection: 'row' }}>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  style={styles.wIconContainer}
+                  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 }}
+                  />
+                  <OText
+                    size={18}
+                    color={currentPrinter?.model === item.model ? theme.colors.primary : theme.colors.textGray}
+                  >
+                    {item.model}
+                  </OText>
+                </TouchableOpacity>
+                {currentPrinter?.model === item.model && (
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPress={() => handleClick(null)}
+                    style={{ width: 40 }}
+                  >
+                    <FeatherIcon
+                      name='x-circle'
+                      color={theme.colors.danger500}
+                      size={20}
+                      style={styles.icons}
+                    />
+                  </TouchableOpacity>
+                )}
+              </View>
+              <View
+                style={styles.wrapperIcons}
               >
-                <FeatherIcon
-                  name='x-circle'
-                  color={theme.colors.danger500}
-                  size={20}
-                  style={styles.icons}
-                />
-              </TouchableOpacity>
-            )}
+                <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>
         ))}
       </View>

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

@@ -8,3 +8,10 @@ export const Container = styled.View`
   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 30px 10px;
+`;

package/themes/business/src/types/index.tsx

@@ -392,7 +392,7 @@ export interface OrderDetailsParams {
   urlToShare?: string;
   messages?: any;
   handleAssignDriver?: (id: any) => {};
-  handleChangeOrderStatus?: (status: any) => {};
+  handleChangeOrderStatus?: (status: any, isAcceptOrReject: any) => {};
   order?: any;
   isFromRoot?: any;
   handleOrderRedirect?: () => {};