ordering-ui-react-native 0.21.21 → 0.21.22-release

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { useLanguage } from 'ordering-components/native';
+import { useLanguage, useConfig } from 'ordering-components/native';
 
 import { AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
 
@@ -24,12 +24,15 @@ export const PreviousOrders = (props: any) => {
     currentTabSelected,
     currentOrdenSelected,
     handleChangeOrderStatus,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    isBusinessApp
   } = props;
 
   let hash: any = {};
   const [, t] = useLanguage();
   const theme = useTheme();
+  const [{ configs }] = useConfig();
+
 
   // const [, setCurrentTime] = useState()
   const [openModal, setOpenModal] = useState(false)
@@ -41,6 +44,9 @@ export const PreviousOrders = (props: any) => {
   const viewMapStatus = [9, 18, 19, 23]
   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
@@ -168,28 +174,30 @@ export const PreviousOrders = (props: any) => {
                   }
                   {_ordersGrouped[k][0]?.status === 0 && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('REJECT_ALL', 'Reject all')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'reject',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && (
+                        <OButton
+                          text={t('REJECT_ALL', 'Reject all')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'reject',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('ACCEPT_ALL', 'Accept all')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12 }}
                         onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
                           action: 'accept',
@@ -236,7 +244,7 @@ export const PreviousOrders = (props: any) => {
                         />
                       </AcceptOrRejectOrderStyle>
                     )}
-                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 &&
+                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -276,26 +284,28 @@ export const PreviousOrders = (props: any) => {
                     ![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
                     (
                       <AcceptOrRejectOrderStyle>
-                        <OButton
-                          text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
-                          bgColor={theme.colors.danger100}
-                          borderColor={theme.colors.danger100}
-                          imgRightSrc={null}
-                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                          parentStyle={{ width: '45%' }}
-                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                          onClick={() => handleChangeOrderStatus(
-                            17,
-                            _ordersGrouped[k].map((o: any) => o.id),
-                          )}
-                        />
+                        {!isHideRejectButtons && (
+                          <OButton
+                            text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
+                            bgColor={theme.colors.danger100}
+                            borderColor={theme.colors.danger100}
+                            imgRightSrc={null}
+                            style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                            parentStyle={{ width: '45%' }}
+                            textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                            onClick={() => handleChangeOrderStatus(
+                              17,
+                              _ordersGrouped[k].map((o: any) => o.id),
+                            )}
+                          />
+                        )}
                         <OButton
                           text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
                           bgColor={theme.colors.success100}
                           borderColor={theme.colors.success100}
                           imgRightSrc={null}
                           style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                          parentStyle={{ width: '45%' }}
+                          parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                           textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                           onClick={() => handleChangeOrderStatus(
                             15,
@@ -322,30 +332,32 @@ export const PreviousOrders = (props: any) => {
                         })}
                       />
                     )}
-                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
+                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && isEnabledFailedPickupDriver && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('PICKUP_FAILED', 'Pickup failed')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'pickupFailed',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && isEnabledOrderNotReady && (
+                        <OButton
+                          text={t('PICKUP_FAILED', 'Pickup failed')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'pickupFailed',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('PICKUP_COMPLETE', 'Pickup complete')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                         onClick={() => handleChangeOrderStatus(
                           9,
@@ -356,28 +368,30 @@ export const PreviousOrders = (props: any) => {
                   )}
                   {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('DELIVERY_FAILED', 'Delivery Failed')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'deliveryFailed',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && (
+                        <OButton
+                          text={t('DELIVERY_FAILED', 'Delivery Failed')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'deliveryFailed',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('DELIVERY_COMPLETE', 'Delivery complete')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                         onClick={() => handleChangeOrderStatus(
                           11,

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

@@ -41,6 +41,16 @@ export const Timestatus = styled.View`
   height: 55px;
   border-radius: 20px;
   top: 5px;
+
+  ${({ timeState }: any) => timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+  ${({ timeState }: any) => timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+  ${({ timeState }: any) => timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
 `
 
 export const AccordionSection = styled.View`

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

@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from 'react'
+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, 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: {
+      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 - 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', 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 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
+          ? item.portName1 ?? currentPrinter?.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 getStorageData = async () => {
+      const printer = await _retrieveStoreData('printer')
+      const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
+      setCurrentPrinter(printer)
+      setAutoPrintEnabled(!!autoPrint)
+    }
+
+    getStorageData()
+  }, [])
+
+  useEffect(() => {
+    currentPrinter?.ip && !isErrorIp && setValue('ip', currentPrinter?.ip)
+  }, [currentPrinter?.type])
+
+  return (
+    <ScrollView
+      showsVerticalScrollIndicator={false}
+    >
+      <OText size={24} style={{ paddingLeft: 30 }}>
+        {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}
+        />
+      </EnabledAutoPrint>
+      <View style={{ paddingHorizontal: 30 }}>
+        {printerList.map((item: any, i: number) => (
+          <Container
+            key={i}
+            activeOpacity={1}
+            onPress={() => handleClick(item)}
+          >
+            <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}
+              >
+                <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>
+    </ScrollView>
+  )
+}

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

@@ -0,0 +1,17 @@
+import styled from "styled-components/native";
+
+export const Container = 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 30px 10px;
+`;

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

@@ -72,7 +72,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const getProductPrice = (product: any) => {
     let subOptionPrice = 0;
-    if (product?.options?.length > 0 && product?.options?.suboptions?.length > 0) {
+    if (product?.options?.length > 0 && product?.options[0]?.suboptions?.length > 0) {
       for (const option of product?.options) {
         for (const suboption of option?.suboptions) {
           subOptionPrice += suboption.quantity * suboption.price;
@@ -118,7 +118,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const onTextLayout = useCallback((e: any) => {
     setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
-  },[]);
+  }, []);
 
   return (
     <AccordionSection>

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

@@ -1,3 +1,5 @@
+
+
 import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,

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

@@ -16,6 +16,7 @@ export const SearchBar = (props: any) => {
     isCancelXButtonShow,
     noBorderShow,
     borderStyle,
+    containerStyle
   } = props;
 
   const [, t] = useLanguage();
@@ -67,7 +68,7 @@ export const SearchBar = (props: any) => {
   });
 
   return (
-    <View style={[styles.container]}>
+    <View style={{ ...styles.container, ...containerStyle}}>
       <OInput
         forwardRef={inputRef}
         value={searchValue}