ordering-ui-react-native 0.22.0 → 0.22.1

package/package.json

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

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

@@ -4,8 +4,10 @@ import {
   View,
   TouchableOpacity,
   ActivityIndicator,
+  Alert,
 } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { StarPRNT } from 'react-native-star-prnt';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import {
@@ -35,6 +37,8 @@ import CountryPicker from 'react-native-country-picker-modal';
 import { NotFoundSource } from '../NotFoundSource';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
+import { _retrieveStoreData } from '../../providers/StoreUtil'
+import { usePrinterCommands } from './usePrinterCommands'
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -57,6 +61,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
   const [{ user, token }] = useSession();
   const [{ configs }] = useConfig();
+  const { generateCommands } = usePrinterCommands()
   const [, { showToast }] = useToast();
   const [unreadAlert, setUnreadAlert] = useState({
     business: false,
@@ -70,6 +75,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [openModalForAccept, setOpenModalForAccept] = useState(false);
   const [openModalForMapView, setOpenModalForMapView] = useState(false);
   const [isDriverModalVisible, setIsDriverModalVisible] = useState(false);
+  const [printerSettings, setPrinterSettings] = useState('')
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -291,7 +297,40 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setOpenModalForAccept(true);
   };
 
+  const printAction = async (printerSettings: any, commands: any) => {
+    try {
+      var printResult = await StarPRNT.print(printerSettings?.emulation, commands, printerSettings?.portName);
+      Alert.alert(
+        t('PRINT_SUCCESS_TITLE', 'Print Success'),
+        t('PRINT_SUCCESS_SUBTITLE', `Go check your _printer_ printer!`).replace('_printer_', printerSettings?.model),
+        [
+          {text: 'OK', onPress: () => null},
+        ],
+        { cancelable: false }
+      )
+    } catch (e) {
+      Alert.alert(
+        t('PRINT_FAIL_TITLE', 'Connection Failed'),
+        t('PRINT_FAIL_SUBTITLE', 'Make sure your Star Printer is turned on and have thermal paper in it.'),
+        [
+          {text: 'OK', onPress: () => null},
+        ],
+        { cancelable: false }
+      )
+    }
+  }
+
   const handleViewSummaryOrder = () => {
+    if (printerSettings) {
+      const commands: any = generateCommands({
+        ...order,
+        orderStatus: getOrderStatus(order?.status, t)?.value
+      })
+      commands.push({ appendCutPaper: StarPRNT.CutPaperAction.PartialCutWithFeed })
+
+      printAction(printerSettings, commands)
+      return
+    }
     navigation?.navigate &&
       navigation.navigate('OrderSummary', {
         order,
@@ -372,6 +411,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
+  useEffect(() => {
+    const getPrinterDefault = async () => {
+      const printer = await _retrieveStoreData('printer')
+      setPrinterSettings(printer)
+    }
+
+    getPrinterDefault()
+  }, [])
+
   const styles = StyleSheet.create({
     driverOff: {
       backgroundColor: theme.colors.notAvailable,

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

@@ -0,0 +1,140 @@
+import { useConfig, useUtils, useLanguage} from 'ordering-components/native'
+
+import { verifyDecimals, getProductPrice } from '../../utils';
+
+/**
+ * Hook to create commands for star micronics printer using PassPRNT library
+ * @returns array of strings
+ */
+
+export const usePrinterCommands = () => {
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig();
+  const [{ parsePrice, parseNumber, parseDate }] = useUtils();
+
+  const deliveryStatus: any = {
+    1: t('DELIVERY', 'Delivery'),
+    2: t('PICK_UP', 'Pick up'),
+    3: t('EAT_IN', 'Eat In'),
+    4: t('CURBSIDE', 'Curbside'),
+    5: t('DRIVER_THRU', 'Driver thru'),
+  };
+
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet')
+    },
+    credit_point: {
+      name: t('POINTS_WALLET', 'Points Wallet')
+    }
+  }
+
+  const percentTip = (order: any) =>
+    parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+    !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+    verifyDecimals(order?.summary?.driver_tip, parseNumber);
+
+  const handlePaymethodsListString = (order: any) => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+    })
+    return paymethodsList.join(', ')
+  }
+
+  const paymethodsLength = (order: any) => order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
+
+  const customerName = (order: any) => `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
+  const generateCommands = (order: any) => {
+    let commands: any = [];
+
+    const textProps = {
+      fontSize: 12,
+      absolutePosition: 40
+    }
+
+    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))}`)
+
+          product.options?.map((option: any) => {
+            list.push(`\t ${option.name}`)
+
+            option.suboptions?.map((suboption: any) => {
+              const { quantity, name, position, price } = suboption
+              const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : ''
+              const string = name !== 'No'
+                ? pos
+                  ? `${quantity} x ${name} ${pos} +${parsePrice(price)}`
+                  : `${quantity} x ${name} +${parsePrice(price)}`
+                : 'No'
+
+              list.push(`\t\t ${string}`)
+            })
+          })
+
+          if (product.comment) {
+            list.push(`\t ${t('COMMENT', 'Comment')}`)
+            list.push(`\t\t ${product.comment}`)
+          }
+
+          list.push('------------------------------------------------',)
+        })
+      }
+
+      return list
+    }
+
+    const appends: any = [
+      `${t('ORDER_NO', 'Order No.')} ${order.id}`,
+      '\n', // need to replace with other break line command
+      order.orderStatus,
+      `${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]}`,
+      `${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')}`,
+      `${t('FULL_NAME', 'Full Name')}: ${customerName(order)}`,
+      `${t('EMAIL', 'Email')}: ${order?.customer?.email}`,
+      `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}`,
+      `${!!order?.customer?.phone ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone}` : '\n'}`,
+      `${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')}`,
+      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')}`,
+      ...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)}`
+    ]
+
+    commands = [
+      ...commands,
+      ...appends.map((append: any) => ({ appendBitmapText: append, ...textProps }))
+    ]
+
+    return commands
+  }
+
+  return { generateCommands }
+}

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

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react'
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native'
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native'
+import { useLanguage } from 'ordering-components/native'
+
+import { _setStoreData, _retrieveStoreData } from '../../providers/StoreUtil'
+import { Container } from './styles'
+import { OText } from '../shared'
+
+export const PrinterSettings = (props: any) => {
+  const { onClose } = props
+
+  const [currentPrinter, setCurrentPrinter] = useState<any>(null)
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    icons: {
+      maxWidth: 40,
+      height: 40,
+      padding: 10,
+      alignItems: 'flex-end'
+    },
+  })
+
+  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' },
+  ]
+
+  const handleClick = async (item: any) => {
+    setCurrentPrinter(item)
+    await _setStoreData('printer', item)
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    const getPrinterDefault = async () => {
+      const printer = await _retrieveStoreData('printer')
+      setCurrentPrinter(printer)
+    }
+
+    getPrinterDefault()
+  }, [])
+
+  return (
+    <ScrollView
+      showsVerticalScrollIndicator={false}
+    >
+      <OText size={24} style={{ paddingLeft: 30 }}>
+        {t('PRINTER_SETTINGS', 'Printer Settings')}
+      </OText>
+      <View style={{ padding: 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)}
+              >
+                <FeatherIcon
+                  name='x-circle'
+                  color={theme.colors.danger500}
+                  size={20}
+                  style={styles.icons}
+                />
+              </TouchableOpacity>
+            )}
+          </Container>
+        ))}
+      </View>
+    </ScrollView>
+  )
+}

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

@@ -0,0 +1,10 @@
+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};
+`

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

@@ -24,6 +24,7 @@ import { LogoutButton } from '../LogoutButton';
 import { LanguageSelector } from '../LanguageSelector';
 import { UserFormDetailsUI } from '../UserFormDetails';
 import { DriverSchedule } from '../DriverSchedule'
+import { PrinterSettings } from '../PrinterSettings'
 import ToggleSwitch from 'toggle-switch-react-native';
 import { UDWrapper } from '../UserFormDetails/styles';
 import {
@@ -485,11 +486,10 @@ const ProfileUI = (props: ProfileParams) => {
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
                 isAlsea={isAlsea}
-                allowDriverUpdateData={allowDriverUpdateData}
               />
             </View>
           )}
-          {!validationFields.loading && !isEdit && (
+          {!validationFields.loading && !isEdit && allowDriverUpdateData && (
             <EditButton>
               <OButton
                 text={t('EDIT', 'Edit')}
@@ -503,17 +503,31 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </EditButton>
           )}
-          <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
-            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-              <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
-              <AntDesignIcon size={18} name='right' />
-            </View>
-            <View style={{
-              borderBottomColor: theme.colors.tabBar,
-              borderBottomWidth: 1,
-              marginTop: 10
-            }} />
-          </Pressable>
+          {!props.isBusinessApp ? (
+            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
+                <AntDesignIcon size={18} name='right' />
+              </View>
+              <View style={{
+                borderBottomColor: theme.colors.tabBar,
+                borderBottomWidth: 1,
+                marginTop: 10
+              }} />
+            </Pressable>
+          ) : (
+            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <OText size={16}>{t('PRINTER_SETTINGS', 'Printer Settings')}</OText>
+                <AntDesignIcon size={18} name='right' />
+              </View>
+              <View style={{
+                borderBottomColor: theme.colors.tabBar,
+                borderBottomWidth: 1,
+                marginTop: 10
+              }} />
+            </Pressable>
+          )}
           <Pressable style={{ marginBottom: 10 }} onPress={() => navigation.navigate('Sessions')}>
             <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
               <OText size={16}>{t('SESSIONS', 'Sessions')}</OText>
@@ -536,7 +550,11 @@ const ProfileUI = (props: ProfileParams) => {
             entireModal
             hideIcons
           >
-            <DriverSchedule schedule={user?.schedule} />
+            {props.isBusinessApp ? (
+              <PrinterSettings onClose={() => setOpenModal(false)} />
+            ) : (
+              <DriverSchedule schedule={user?.schedule} />
+            )}
           </OModal>
         </ScrollView>
       )}

package/themes/business/src/hooks/useLocation.tsx

@@ -48,8 +48,8 @@ export const useLocation = () => {
       GeoLocation.getCurrentPosition(
         ({ coords }) => {
           resolve({
-            latitude: typeof coords.latitude !== 'number' && !Number.isNaN(coords.latitude) ? coords.latitude : 0,
-            longitude: typeof coords.longitude !== 'number' && !Number.isNaN(coords.longitude) ? coords.longitude : 0,
+            latitude: typeof coords.latitude === 'number' && !Number.isNaN(coords.latitude) ? coords.latitude : 0,
+            longitude: typeof coords.longitude === 'number' && !Number.isNaN(coords.longitude) ? coords.longitude : 0,
             speed: coords.speed,
           });
         },

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

@@ -59,6 +59,7 @@ export interface ProfileParams {
   isAlsea?: boolean;
   isShowDriverStatus?: boolean;
   isFocused?: boolean;
+  isBusinessApp?: boolean;
 }
 
 export interface AddressListParams {