ordering-ui-react-native 0.21.59-test → 0.22.43-test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.59-test",
+  "version": "0.22.43-test",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -45,7 +45,6 @@
     "@react-native-firebase/analytics": "^12.9.3",
     "@react-native-firebase/app": "^12.9.3",
     "@react-native-google-signin/google-signin": "^7.0.1",
-    "@react-native-picker/picker": "^2.4.10",
     "@react-navigation/drawer": "^5.10.2",
     "@react-navigation/material-bottom-tabs": "^5.3.14",
     "@react-navigation/native": "^5.7.6",
@@ -79,6 +78,7 @@
     "react-native-credit-card-input": "^0.4.1",
     "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
+    "react-datepicker": "^4.12.0",
     "react-native-elements": "^3.0.0-alpha.1",
     "react-native-fast-image": "^8.3.3",
     "react-native-fbsdk-next": "^7.0.1",
@@ -111,7 +111,6 @@
     "react-native-signature-canvas": "^4.3.0",
     "react-native-snap-carousel": "^3.9.1",
     "react-native-sound": "^0.11.1",
-    "react-native-star-io10": "^1.1.0",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
     "react-native-tracking-transparency": "^0.1.1",

package/themes/business/index.tsx

@@ -42,8 +42,6 @@ import { NewOrderNotification } from './src/components/NewOrderNotification';
 import { DriverSchedule } from './src/components/DriverSchedule';
 import { ScheduleBlocked } from './src/components/ScheduleBlocked';
 import { OrderDetailsLogistic } from './src/components/OrderDetailsLogistic'
-import HandleStarPrinter from './src/components/StarPrinter/';
-import SearchStarPrinter from './src/components/StarPrinter/SearchPrinter';
 //OComponents
 import {
   OText,
@@ -132,7 +130,4 @@ export {
   useLocation,
   // providers
   StoreMethods,
-  //printer
-  HandleStarPrinter,
-  SearchStarPrinter,
 };

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

@@ -307,7 +307,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   }, [])
 
   return (
-    <KeyboardAvoidingView style={{ flex: 1 }}>
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+    >
       <View style={styles.parent}>
         <View style={styles.upper}>
           <TopActions>

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

@@ -25,6 +25,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
     secondButton,
     widthButton,
     isPadding,
+    isHideRejectButtons
   } = props;
 
   const theme = useTheme();
@@ -61,39 +62,41 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
           width: '100%',
           justifyContent: 'space-between',
         }}>
-        <Button
-          secondButton={secondButton}
-          style={[
-            {
-              borderWidth: colorTxt1 ? 1 : 0,
-              borderColor: colorTxt1 ? colorTxt1 : null,
-            },
-            secondButton
-              ? { backgroundColor: firstColorCustom || styles.primaryBtn }
-              : color
-              ? { backgroundColor: color }
-              : styles.primaryBtn,
-            ,
-            { width: widthButton },
-          ]}
-          onPress={firstButtonClick}
-          disabled={disabled}>
-          <OText color={theme.colors.white} size={16} mLeft={20}>
-            {btnLeftValueShow ? btnLeftValue : ''}
-          </OText>
+        {!isHideRejectButtons && (
+          <Button
+            secondButton={secondButton}
+            style={[
+              {
+                borderWidth: colorTxt1 ? 1 : 0,
+                borderColor: colorTxt1 ? colorTxt1 : null,
+              },
+              secondButton
+                ? { backgroundColor: firstColorCustom || styles.primaryBtn }
+                : color
+                ? { backgroundColor: color }
+                : styles.primaryBtn,
+              ,
+              { width: widthButton },
+            ]}
+            onPress={firstButtonClick}
+            disabled={disabled}>
+            <OText color={theme.colors.white} size={16} mLeft={20}>
+              {btnLeftValueShow ? btnLeftValue : ''}
+            </OText>
 
-          <OText
-            style={styles.btnTextStyle}
-            color={colorTxt1 ? colorTxt1 : theme.colors.white}
-            numberOfLines={2}
-            adjustsFontSizeToFit>
-            {btnText}
-          </OText>
+            <OText
+              style={styles.btnTextStyle}
+              color={colorTxt1 ? colorTxt1 : theme.colors.white}
+              numberOfLines={2}
+              adjustsFontSizeToFit>
+              {btnText}
+            </OText>
 
-          <OText color={theme.colors.white} size={16} mRight={20}>
-            {btnRightValueShow ? btnRightValue : ''}
-          </OText>
-        </Button>
+            <OText color={theme.colors.white} size={16} mRight={20}>
+              {btnRightValueShow ? btnRightValue : ''}
+            </OText>
+          </Button>
+        )}
 
         {secondButton && (
           <Button

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

@@ -61,9 +61,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [, { showToast }] = useToast();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
+
   const { order } = props.order
 
   const isAllowedDriverRejectOrder = configs?.allow_driver_reject_order?.value === '1'
+  const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
   const theme = useTheme();
   const [, t] = useLanguage();
   const [session] = useSession();
@@ -88,9 +90,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const logisticOrderStatus = [4, 6, 7]
 
   const showFloatButtonsPickUp: any = {
-    8: true,
+    8: !isHideRejectButtons,
     3: true,
-    18: true,
+    18: !isHideRejectButtons,
   };
 
   const showFloatButtonsAcceptOrReject: any = {
@@ -482,7 +484,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             />
           </Pickup>
         )}
-        {order?.status === 3 && order?.delivery_type === 1 && (
+        {order?.status === 3 && order?.delivery_type === 1 && !isHideRejectButtons && (
           <View style={{ paddingVertical: 20, marginBottom: 20 }}>
             <OButton
               style={styles.btnPickUp}
@@ -577,7 +579,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     secondButton={true}
                     firstColorCustom={theme.colors.red}
                     secondColorCustom={theme.colors.green}
-                    widthButton={'45%'}
+                    widthButton={isHideRejectButtons ? '100%': '45%'}
+                    isHideRejectButtons={isHideRejectButtons}
                   />
                 )}
                 {(validStatusComplete.includes(order?.status)) && (
@@ -596,7 +599,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       secondButton={true}
                       firstColorCustom={theme.colors.red}
                       secondColorCustom={theme.colors.green}
-                      widthButton={'45%'}
+                      widthButton={isHideRejectButtons ? '100%': '45%'}
+                      isHideRejectButtons={isHideRejectButtons}
                     />
                   </>
                 )}
@@ -610,7 +614,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     secondButton={true}
                     firstColorCustom={theme.colors.red}
                     secondColorCustom={theme.colors.green}
-                    widthButton={'45%'}
+                    widthButton={isHideRejectButtons ? '100%': '45%'}
+                    isHideRejectButtons={isHideRejectButtons}
                   />
                 )}
               </>

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

@@ -10,6 +10,7 @@ import {
     useLanguage,
     OrderDetails as OrderDetailsConTableoller,
     useSession,
+    useConfig
 } from 'ordering-components/native';
 
 //Components
@@ -34,6 +35,8 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     const theme = useTheme();
     const [, t] = useLanguage();
     const [session] = useSession();
+    const [{ configs }] = useConfig();
+
     const [alertState, setAlertState] = useState<{
         open: boolean;
         content: Array<string>;
@@ -41,6 +44,7 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     }>({ open: false, content: [], key: null });
 
     const logisticOrderStatus = [4, 6, 7]
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
 
     const showFloatButtonsAcceptOrReject: any = {
         0: true,
@@ -166,7 +170,8 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
                                         secondButton={true}
                                         firstColorCustom={theme.colors.red}
                                         secondColorCustom={theme.colors.green}
-                                        widthButton={'45%'}
+                                        widthButton={isHideRejectButtons ? '100%': '45%'}
+                                        isHideRejectButtons={isHideRejectButtons}
                                     />
                                 )}
                             </>

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

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { OText, OIconButton } from '../shared';
-import {
-  StyleSheet, View, Platform, Alert
-} from 'react-native';
+import { StyleSheet, View, Platform, Alert } from 'react-native';
 import {
   Content,
   OrderCustomer,
@@ -22,8 +20,8 @@ import { FloatingButton } from '../FloatingButton';
 import RNHTMLtoPDF from 'react-native-html-to-pdf';
 import RNPrint from 'react-native-print';
 import { useTheme } from 'styled-components/native';
-import { ProductItemAccordion } from '../ProductItemAccordion';
 
+import { ProductItemAccordion } from '../ProductItemAccordion';
 
 export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermission, getPermissions, isGrantedPermissions, checkBluetoothPermission }: any) => {
   const handleArrowBack: any = () => {
@@ -36,7 +34,6 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     selectedPrinter: { url: undefined },
   });
 
-
   const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
     if (name !== 'No') {
       const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
@@ -343,10 +340,6 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     }
   };
 
-  const openPrint = () => {
-    navigation.navigate('HandleStarPrinter')
-  }
-
   return (
     <>
       <Content>
@@ -686,7 +679,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
 
       <View style={{ marginBottom: 0 }}>
         <FloatingButton
-          firstButtonClick={() => openPrint()}
+          firstButtonClick={() => handlePrint()}
           btnText={t('PRINT', 'Print')}
           color={theme.colors.green}
           widthButton={'100%'}

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

@@ -608,6 +608,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 orderTitle={props.orderDetailsProps?.orderTitle}
                 handleChangeOrderStatus={handleChangeOrderStatus}
                 handleSendCustomerReview={handleSendCustomerReview}
+                isBusinessApp={isBusinessApp}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -618,6 +619,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
+                isBusinessApp={isBusinessApp}
                 isLogisticOrder
               />
             )

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { View } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OButton } from '../shared';
-import { useLanguage } from 'ordering-components/native'
+import { useLanguage, useConfig } from 'ordering-components/native'
 import { OrderItem } from './OrderItem';
 import { AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
 
@@ -28,6 +28,9 @@ export const OrdersList = React.memo((props: any) => {
 
     const theme = useTheme()
     const [, t] = useLanguage()
+    const [{ configs }] = useConfig();
+
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
 
     return (
         <View
@@ -59,16 +62,18 @@ export const OrdersList = React.memo((props: any) => {
                         />
                     ) : (
                         <>
-                            <OButton
-                                text={t('REJECT', 'Reject')}
-                                onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                                bgColor={theme.colors.red}
-                                borderColor={theme.colors.red}
-                                imgRightSrc={null}
-                                style={{ borderRadius: 7, height: 40 }}
-                                parentStyle={{ width: '45%' }}
-                                textStyle={{ color: theme.colors.white }}
-                            />
+                            {!isHideRejectButtons && (
+                                <OButton
+                                    text={t('REJECT', 'Reject')}
+                                    onClick={() => handleClickLogisticOrder(2, _order?.id)}
+                                    bgColor={theme.colors.red}
+                                    borderColor={theme.colors.red}
+                                    imgRightSrc={null}
+                                    style={{ borderRadius: 7, height: 40 }}
+                                    parentStyle={{ width: '45%' }}
+                                    textStyle={{ color: theme.colors.white }}
+                                />
+                            )}
                             <OButton
                                 text={t('ACCEPT', 'Accept')}
                                 onClick={() => handleClickLogisticOrder(1, _order?.id)}
@@ -76,7 +81,7 @@ export const OrdersList = React.memo((props: any) => {
                                 borderColor={theme.colors.green}
                                 imgRightSrc={null}
                                 style={{ borderRadius: 7, height: 40 }}
-                                parentStyle={{ width: '45%' }}
+                                parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                                 textStyle={{ color: theme.colors.white }}
                             />
                         </>

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,7 @@ 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 handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -168,28 +172,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 +242,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 &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -276,26 +282,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,
@@ -324,28 +332,30 @@ export const PreviousOrders = (props: any) => {
                     )}
                   {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
                     <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 && (
+                        <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 +366,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/original/src/components/BusinessProductsList/index.tsx

@@ -106,7 +106,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection={!isFiltMode}
+              // enableIntersection={!isFiltMode}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -135,7 +135,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection={!isFiltMode}
+                      // enableIntersection={!isFiltMode}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}

package/themes/original/src/components/BusinessProductsListing/index.tsx

@@ -726,6 +726,7 @@ export const BusinessProductsListing = (props: BusinessProductsListingParams) =>
   const businessProductslistingProps = {
     ...props,
     isForceSearch: Platform.OS === 'ios',
+    isApp: true,
     UIComponent: BusinessProductsListingUI
   }
   return (

package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx

@@ -56,7 +56,7 @@ export const GiftCardUI =  React.memo((props: any) => {
       <View style={style.actionWrapper}>
         <OButton
           onClick={() => setOpenModal('purchase')}
-          text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+          text={t('PURCHASE', 'Purchase')}
           bgColor={theme.colors.primary}
           borderColor={theme.colors.primary}
           textStyle={{ color: 'white', fontSize: 13 }}
@@ -66,7 +66,7 @@ export const GiftCardUI =  React.memo((props: any) => {
 
         <OButton
           onClick={() => setOpenModal('redeem')}
-          text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+          text={t('REDEEM', 'Redeem')}
           bgColor={theme.colors.lightPrimary}
           borderColor={theme.colors.lightPrimary}
           textStyle={{ color: theme.colors.primary, fontSize: 13 }}
@@ -79,13 +79,18 @@ export const GiftCardUI =  React.memo((props: any) => {
 				open={openModal === 'purchase'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
-				<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
+				<PurchaseGiftCard
+          handleCustomGoToCheckout={handleCustomGoToCheckout}
+          onClose={() => setOpenModal(null)}
+        />
 			</OModal>
       <OModal
 				open={openModal === 'redeem'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
 				<RedeemGiftCard
           onClose={() => setOpenModal(null)}

package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx

@@ -3,10 +3,11 @@ import {
   useLanguage,
   PurchaseGiftCard as PurchaseGiftCardController
 } from 'ordering-components/native'
-import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ScrollView, Platform } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OIcon } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container
@@ -17,7 +18,8 @@ const PurchaseGiftCardUI = (props: any) => {
     productsListState,
     selectedProduct,
     setSelectedProduct,
-    handleAccept
+    handleAccept,
+    onClose
   } = props
 
   const theme = useTheme()
@@ -42,7 +44,38 @@ const PurchaseGiftCardUI = (props: any) => {
 
   return (
     <Container>
-      <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      <View style={{
+        marginBottom: 40,
+        marginTop: Platform.OS === 'ios' ? 30 : 50,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}>
+        <OButton
+          imgLeftStyle={{ width: 18 }}
+          imgRightSrc={null}
+          style={{
+            borderWidth: 0,
+            width: 26,
+            height: 26,
+            backgroundColor: '#FFF',
+            borderColor: '#FFF',
+            shadowColor: '#FFF',
+            paddingLeft: 0,
+            paddingRight: 0,
+          }}
+          onClick={onClose}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26,
+            style: {
+              color: theme.colors.textNormal
+            }
+          }}
+        />
+        <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      </View>
       <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
       <ScrollView
         contentContainerStyle={{

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -3,9 +3,10 @@ import {
   useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
 } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
-import { StyleSheet, View, Alert } from 'react-native';
+import { StyleSheet, View, Alert, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container,
@@ -93,7 +94,38 @@ const RedeemGiftCardUI = (props: any) => {
     <Container>
       {!redeemedGiftCard ? (
         <View>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
@@ -156,7 +188,38 @@ const RedeemGiftCardUI = (props: any) => {
         </View>
       ) : (
         <>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('GIFT_CARD', 'Gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+          </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>

package/themes/original/src/components/NavBar/index.tsx

@@ -92,7 +92,6 @@ const NavBar = (props: Props) => {
 				<TitleWrapper style={{ ...{ paddingHorizontal: props.isVertical ? 0 : 10 }, ...props.titleWrapStyle }}>
 					<OText
 						size={20}
-						lineHeight={36}
 						weight={Platform.OS === 'ios' ? '600' : 'bold'}
 						style={
 							{

package/themes/original/src/components/UserFormDetails/index.tsx

@@ -5,7 +5,7 @@ import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
 import { SignupForm } from '../SignupForm'
 
-import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
+import { UDForm, UDLoader, UDWrapper, WrapperPhone, DateContainer } from './styles';
 
 import { OText, OButton, OInput, OModal, OIcon } from '../shared';
 import { OAlert } from '../../../../../src/components/shared'
@@ -13,6 +13,8 @@ import { OAlert } from '../../../../../src/components/shared'
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
 import { ListItem } from '../UserProfile/styles';
+import moment from 'moment';
+import DatePicker from 'react-datepicker'
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -81,6 +83,7 @@ export const UserFormDetailsUI = (props: any) => {
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
 	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [birthdate, setBirthdate] = useState(null)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -92,6 +95,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -206,6 +210,12 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const _handleChangeDate = (date: any) => {
+		setBirthdate(date)
+		const _birthdate = moment(date).format('YYYY-MM-DD')
+		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+	}
+
 	const onRemoveAccount = () => {
 		setConfirm({
 			open: true,
@@ -268,6 +278,14 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!validationFields.loading && birthdate) {
+			setValue('birthdate', formState?.result?.result
+				? formState?.result?.result?.birthdate
+				: formState?.changes?.birthdate ?? (user && user?.birthdate) ?? '')
+		}
+	}, [validationFields, birthdate])
+
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
 		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
@@ -359,7 +377,22 @@ export const UserFormDetailsUI = (props: any) => {
 										</React.Fragment>
 									),
 							)}
-
+							{showInputBirthday && (
+								<WrapperPhone>
+									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('BIRTHDATE', 'Birthdate')}
+									</OText>
+									<DateContainer>
+										<DatePicker
+											selected={birthdate ?? user?.birthdate}
+											placeholderText='yyyy/mm/dd'
+											className='date'
+											name='birthdate'
+											onChange={_handleChangeDate}
+										/>
+									</DateContainer>
+								</WrapperPhone>
+							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>

package/themes/original/src/components/UserFormDetails/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const UDForm = styled.View`
   display: flex;
@@ -32,3 +32,33 @@ export const WrapperPhone = styled.View`
   border-bottom-width: 1px;
   border-bottom-color: ${(props: any) => props.theme.colors.border};
 `
+
+export const DateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  text-align: initial;
+  border-bottom: 1px solid #E9ECEF;
+  margin-bottom: 20px;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 10px 15px;
+    border: 1px solid #E9ECEF;
+  }
+
+  .react-datepicker__triangle {
+    transform: translate(40px, 0px) !important;
+  }
+
+  ${(props: any) => props.theme?.rtl ? css`
+    span {
+      margin-left: 10px;
+    }
+  ` : css`
+    span {
+      margin-right: 10px;
+    }
+  `}
+`

package/themes/original/src/components/Wallets/index.tsx

@@ -141,6 +141,7 @@ const WalletsUI = (props: any) => {
               showCall={false}
               paddingTop={10}
               btnStyle={{ paddingLeft: 0 }}
+              isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
             />
             {isChewLayout && !openHistory && (

package/themes/original/src/components/Wallets/styles.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 20px;
   padding-bottom: 20px;
   padding-top: ${(props: any) => props.pdng};
 `

package/themes/business/src/components/StarPrinter/SearchPrinter.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  Button,
-  FlatList,
-  PermissionsAndroid,
-  Platform
-} from 'react-native';
-
-import {
-  InterfaceType,
-  StarDeviceDiscoveryManager,
-  StarDeviceDiscoveryManagerFactory,
-  StarPrinter
-} from 'react-native-star-io10';
-import { useTheme } from 'styled-components';
-import { OIconButton } from '../shared';
-
-const SearchStarPrinter = ({ navigation }: any) => {
-  let _manager: StarDeviceDiscoveryManager;
-  const theme = useTheme();
-
-  const [state, setState] = useState({
-    bluetoothIsEnabled: true,
-    bluetoothLeIsEnabled: true,
-    printers: [],
-  })
-
-  const _onPressDiscoveryButton = async () => {
-
-    setState({
-      ...state,
-      printers: [],
-    });
-
-    try {
-      await _manager?.stopDiscovery()
-
-      const interfaceTypes: Array<InterfaceType> = []
-
-      if (state.bluetoothIsEnabled) {
-        interfaceTypes.push(InterfaceType.Bluetooth);
-      }
-      if (state.bluetoothLeIsEnabled) {
-        interfaceTypes.push(InterfaceType.BluetoothLE);
-      }
-
-      _manager = await StarDeviceDiscoveryManagerFactory.create(interfaceTypes);
-      _manager.discoveryTime = 10000;
-
-      _manager.onPrinterFound = (printer: StarPrinter) => {
-        const printers = state.printers;
-        printers.push(printer);
-        setState({
-          ...state,
-          printers: printers
-        });
-
-        console.log(`Found printer: ${printer.connectionSettings.identifier}.`);
-      };
-
-      _manager.onDiscoveryFinished = () => {
-        console.log(`Discovery finished.`);
-      };
-
-
-      await _manager.startDiscovery();
-    }
-    catch (error) {
-      console.log(`Error: ${String(error)}`);
-    }
-  }
-
-  const handleArrowBack = () => {
-    navigation?.canGoBack() && navigation.goBack();
-  };
-
-  return (
-    <View style={{ margin: 50 }}>
-      <OIconButton
-        icon={theme.images.general.arrow_left}
-        iconStyle={{ width: 20, height: 20 }}
-        borderColor={theme.colors.clear}
-        style={{ maxWidth: 40, justifyContent: 'flex-end' }}
-        onClick={() => handleArrowBack()}
-      />
-      <Text>Interface</Text>
-
-      <View
-        style={{ width: 100, marginTop: 30 }}>
-        <Button
-          title="Discovery"
-          onPress={async () => await _onPressDiscoveryButton()}
-        />
-      </View>
-      <FlatList
-        style={{ marginTop: 30 }}
-        data={state.printers}
-        renderItem={({ item }) => <Text>{item.connectionSettings.interfaceType} : {item.connectionSettings.identifier}</Text>}
-        keyExtractor={(item, index) => index.toString()} />
-    </View>
-  );
-};
-
-export default SearchStarPrinter;

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

@@ -1,235 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  Button,
-  TextInput,
-  PermissionsAndroid,
-  Platform
-} from 'react-native';
-
-import {
-  Picker
-} from '@react-native-picker/picker';
-
-import {
-  InterfaceType,
-  StarConnectionSettings,
-  StarXpandCommand,
-  StarPrinter
-} from 'react-native-star-io10';
-
-
-const HandleStarPrinter = ({ navigation }) => {
-
-  const [state, setState] = React.useState({
-    interfaceType: InterfaceType.Bluetooth,
-    identifier: '00:11:62:00:00:00',
-    imageBase64: ''
-  });
-
-  const _onPressPrintButton = async () => {
-    const settings = new StarConnectionSettings();
-    settings.interfaceType = state.interfaceType;
-    settings.identifier = state.identifier;
-
-
-    const printer = new StarPrinter(settings);
-
-    try {
-      const builder = new StarXpandCommand.StarXpandCommandBuilder();
-      builder.addDocument(new StarXpandCommand.DocumentBuilder()
-        .addPrinter(new StarXpandCommand.PrinterBuilder()
-          .actionPrintImage(new StarXpandCommand.Printer.ImageParameter("logo_01.png", 406))
-          .styleInternationalCharacter(StarXpandCommand.Printer.InternationalCharacterType.Usa)
-          .styleCharacterSpace(0)
-          .styleAlignment(StarXpandCommand.Printer.Alignment.Center)
-          .actionPrintText("Star Clothing Boutique\n" +
-            "123 Star Road\n" +
-            "City, State 12345\n" +
-            "\n")
-          .styleAlignment(StarXpandCommand.Printer.Alignment.Left)
-          .actionPrintText("Date:MM/DD/YYYY    Time:HH:MM PM\n" +
-            "--------------------------------\n" +
-            "\n")
-          .actionPrintText("SKU         Description    Total\n" +
-            "300678566   PLAIN T-SHIRT  10.99\n" +
-            "300692003   BLACK DENIM    29.99\n" +
-            "300651148   BLUE DENIM     29.99\n" +
-            "300642980   STRIPED DRESS  49.99\n" +
-            "300638471   BLACK BOOTS    35.99\n" +
-            "\n" +
-            "Subtotal                  156.95\n" +
-            "Tax                         0.00\n" +
-            "--------------------------------\n")
-          .actionPrintText("Total     ")
-          .add(new StarXpandCommand.PrinterBuilder()
-            .styleMagnification(new StarXpandCommand.MagnificationParameter(2, 2))
-            .actionPrintText("   $156.95\n")
-          )
-          .actionPrintText("--------------------------------\n" +
-            "\n" +
-            "Charge\n" +
-            "156.95\n" +
-            "Visa XXXX-XXXX-XXXX-0123\n" +
-            "\n")
-          .add(new StarXpandCommand.PrinterBuilder()
-            .styleInvert(true)
-            .actionPrintText("Refunds and Exchanges\n")
-          )
-          .actionPrintText("Within ")
-          .add(new StarXpandCommand.PrinterBuilder()
-            .styleUnderLine(true)
-            .actionPrintText("30 days")
-          )
-          .actionPrintText(" with receipt\n")
-          .actionPrintText("And tags attached\n" +
-            "\n")
-          .styleAlignment(StarXpandCommand.Printer.Alignment.Center)
-          .actionPrintBarcode(new StarXpandCommand.Printer.BarcodeParameter('0123456',
-            StarXpandCommand.Printer.BarcodeSymbology.Jan8)
-            .setBarDots(3)
-            .setBarRatioLevel(StarXpandCommand.Printer.BarcodeBarRatioLevel.Level0)
-            .setHeight(5)
-            .setPrintHri(true))
-          .actionFeedLine(1)
-          .actionPrintQRCode(new StarXpandCommand.Printer.QRCodeParameter('Hello World.\n')
-            .setModel(StarXpandCommand.Printer.QRCodeModel.Model2)
-            .setLevel(StarXpandCommand.Printer.QRCodeLevel.L)
-            .setCellSize(8))
-          .actionCut(StarXpandCommand.Printer.CutType.Partial)
-        )
-      );
-
-      const commands = await builder.getCommands();
-
-      await printer.open();
-      await printer.print(commands);
-
-      console.log(`Success`);
-    }
-    catch (error) {
-      console.log(`Error: ${String(error)}`);
-    }
-    finally {
-      await printer.close();
-      await printer.dispose();
-    }
-  }
-
-
-  const onSearchPrint = () => {
-    navigation.navigate('SearchStarPrinter')
-  }
-
-  const onPrintStatus = async () => {
-    const settings = new StarConnectionSettings();
-    settings.interfaceType = InterfaceType.Lan;
-    settings.identifier = '00:11:62:00:00:00';
-    const printer = new StarPrinter(settings);
-
-    try {
-      // Connect to the printer.
-      await printer.open();
-
-      // Get printer status.
-      const status = await printer.getStatus();
-      console.log(status);
-    }
-    catch (error) {
-      // Error.
-      console.log(error);
-    }
-    finally {
-      // Disconnect from the printer and dispose object.
-      await printer.close();
-      await printer.dispose();
-    }
-  }
-
-  const onPrinterMonitor = async () => {
-    let printer: StarPrinter;
-    const settings = new StarConnectionSettings();
-    settings.interfaceType = InterfaceType.Lan;
-    settings.identifier = '00:11:62:00:00:00';
-    printer = new StarPrinter(settings);
-
-    // Callback for printer state changed.
-    printer.printerDelegate.onReady = () => {
-      console.log(`Printer: Ready`);
-    }
-    printer.drawerDelegate.onOpenCloseSignalSwitched = (openCloseSignal: any) => {
-      console.log(`Drawer: Open Close Signal Switched: ${String(openCloseSignal)}`);
-    }
-    printer.inputDeviceDelegate.onDataReceived = (data: any) => {
-      console.log(`Input Device: DataReceived ${String(data)}`);
-    }
-    printer.displayDelegate.onConnected = () => {
-      console.log(`Display: Connected`);
-    }
-    // ...
-    // Please refer to document for other callback.
-
-    try {
-      // Connect to the printer.
-      await printer.open();
-    }
-    catch (error) {
-      // Error.
-      console.log(error);
-    }
-  }
-
-  return (
-    <View style={{ margin: 50 }}>
-      <View style={{ flexDirection: 'row' }}>
-        <Text style={{ width: 100 }}>Interface</Text>
-        <Picker
-          style={{ width: 200, marginLeft: 20, justifyContent: 'center' }}
-          selectedValue={state.interfaceType}
-          onValueChange={(value) => {
-            setState({ ...state, interfaceType: value });
-          }}>
-          <Picker.Item label='Bluetooth' value={InterfaceType.Bluetooth} />
-          <Picker.Item label='Bluetooth LE' value={InterfaceType.BluetoothLE} />
-        </Picker>
-      </View>
-      <View style={{ flexDirection: 'row', marginTop: 30 }}>
-        <Text style={{ width: 100 }}>Identifier</Text>
-        <TextInput
-          style={{ width: 200, marginLeft: 20 }}
-          value={state.identifier}
-          onChangeText={(value) => {
-            setState({ ...state, identifier: value });
-          }}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Search Printer"
-          onPress={onSearchPrint}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Printer status"
-          onPress={onPrintStatus}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Printer monitor"
-          onPress={onPrinterMonitor}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Print"
-          onPress={async () => await _onPressPrintButton()}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default HandleStarPrinter;