ordering-ui-react-native 0.22.2 → 0.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.22.02",
+  "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/PrinterSettings/index.tsx

@@ -6,16 +6,18 @@ 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 { 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
@@ -58,6 +60,9 @@ export const PrinterSettings = (props: any) => {
       borderWidth: 1,
       borderRadius: 8,
     },
+    label: {
+      color: theme.colors.textGray
+    },
   })
 
   const printerList = [
@@ -111,13 +116,20 @@ export const PrinterSettings = (props: any) => {
     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(() => {
@@ -131,7 +143,25 @@ 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}

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?: () => {};