ordering-ui-react-native 0.22.0 → 0.22.1-release

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

@@ -0,0 +1,267 @@
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, TouchableOpacity, View, Dimensions } 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 ToggleSwitch from 'toggle-switch-react-native';
+import { useLanguage } from 'ordering-components/native'
+
+import { _setStoreData, _retrieveStoreData } from '../../providers/StoreUtil'
+import { Container, ContainerList, EnabledAutoPrint, NoPrintersContainer } from './styles'
+import { OText, OIcon, OModal, OButton } from '../shared'
+import { PrinterEdition } from '../PrinterEdition'
+
+export const PrinterSettings = (props: any) => {
+  const { navigation, onClose } = props
+
+  const [printers, setPrinters] = useState<any>({ list: [] })
+  const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
+  const [openModal, setOpenModal] = useState<any>({ open: false, data: null })
+
+  const WIDTH_SCREEN = Dimensions.get('window').width
+  const HEIGHT_SCREEN = Dimensions.get('window').height
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  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 - 40 - 22 - 22 - 10, // screen - margin - icon - icon - marginIcon
+    },
+    wrapperContainer: {
+      flexDirection: 'column',
+    },
+    wrapperIcons: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      marginBottom: 5,
+    },
+    inputStyle: {
+      height: 40,
+      borderWidth: 1,
+      borderRadius: 8,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+    titleGroups: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      minHeight: 33,
+    },
+    addButtonText: {
+      color: theme.colors.inputTextColor,
+      fontSize: 16,
+    },
+    addButton: {
+      height: 40,
+      marginTop: 10,
+      borderRadius: 8,
+      marginRight: 10,
+      marginBottom: 10,
+    },
+  })
+
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const handleClick = async ({ item, type, ip, edit, isAdd, index }: any) => {
+    let _item = item
+    const action = edit || isAdd
+    let _printers = printers.list
+    const idx = index ?? _printers.findIndex((p: any) => p.model === _item.model)
+
+    if (idx !== -1 && !action) {
+      _printers.splice(idx, 1);
+    } else {
+      const _currentPrinter = _printers.find((p: any) => p.model === _item?.model)
+      _item = {
+        ..._currentPrinter,
+        ...item,
+        type: type ?? _currentPrinter?.type ?? 1,
+        ip: ip ?? _currentPrinter?.ip ?? '',
+        portName: (type ?? _currentPrinter?.type) === 1 || !ip
+          ? item?.bt ?? item.portName1 ?? _currentPrinter?.portName1
+          : `TCP:${ip}`
+      }
+      edit ? (_printers[idx] = _item) : _printers.push(_item)
+    }
+
+    setPrinters({ list: _printers })
+    await _setStoreData('printers', _printers)
+    type === 1 && onClose && onClose()
+  }
+
+  const handleAutoPrint = async () => {
+    setAutoPrintEnabled(!autoPrintEnabled)
+    await _setStoreData('auto_print_after_accept_order', !autoPrintEnabled)
+  }
+
+  useEffect(() => {
+    const getStorageData = async () => {
+      const printers = await _retrieveStoreData('printers')
+      const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
+      setPrinters({ list: printers ?? [] })
+      setAutoPrintEnabled(!!autoPrint)
+    }
+
+    getStorageData()
+  }, [])
+
+  return (
+    <Container>
+      <View style={styles.titleGroups}>
+        <TouchableOpacity onPress={() => goToBack()} style={styles.btnBackArrow}>
+          <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+        </TouchableOpacity>
+      </View>
+      <OText size={24} style={{ paddingTop: 0 }}>
+        {t('PRINTER_SETTINGS', 'Printer Settings')}
+      </OText>
+      {!!printers.list.length && (
+        <EnabledAutoPrint>
+          <View style={{ flex: 1 }}>
+            <OText
+              numberOfLines={2}
+              adjustsFontSizeToFit
+              color={theme.colors.textGray}
+              style={{ 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>
+      )}
+      {!!printers.list.length && (
+        <OButton
+          text={t('ADD_PRINTER', 'Add printer')}
+          imgRightSrc={null}
+          textStyle={styles.addButtonText}
+          style={styles.addButton}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          onClick={() => setOpenModal({ open: true, data: null })}
+        />
+      )}
+      <View>
+        {printers.list.map((item: any, i: number) => (
+          <ContainerList
+            key={i}
+            activeOpacity={1}
+          >
+            <View style={styles.wrapperContainer}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  style={styles.wIconContainer}
+                  onPress={() => setOpenModal({ open: true, data: { ...item, index: i} })}
+                >
+                  <SimpleLineIcons
+                    name='printer'
+                    color={theme.colors.textGray}
+                    size={18}
+                    style={{
+                      ...styles.icons,
+                      color: theme.colors.primary
+                    }}
+                  />
+                  <OText
+                    size={18}
+                    color={theme.colors.primary}
+                  >
+                    {item?.nickname ?? item.model}
+                  </OText>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => setOpenModal({ open: true, data: { ...item, index: i} })}
+                >
+                  <FeatherIcon
+                    name='edit'
+                    size={22}
+                  />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => handleClick({ item })}
+                  style={{ marginLeft: 10 }}
+                >
+                  <FeatherIcon
+                    name='trash-2'
+                    size={22}
+                    color={theme.colors.danger500}
+                  />
+                </TouchableOpacity>
+              </View>
+            </View>
+          </ContainerList>
+        ))}
+        {!printers.list.length && (
+          <NoPrintersContainer style={{ height: HEIGHT_SCREEN/2 }}>
+            <OText
+              size={20}
+              color={theme.colors.textGray}
+              numberOfLines={2}
+              adjustsFontSizeToFit
+              style={{ paddingHorizontal: 0, opacity: 0.4 }}
+            >
+              {t('NO_PRINTERS_CONFIGURED', 'No printers configured')}
+            </OText>
+            <OButton
+              text={t('ADD_PRINTER', 'Add printer')}
+              imgRightSrc={null}
+              textStyle={styles.addButtonText}
+              style={styles.addButton}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+              onClick={() => setOpenModal({ open: true, data: null })}
+            />
+          </NoPrintersContainer>
+        )}
+      </View>
+      <OModal
+        hideIcons
+        entireModal
+        customClose
+        open={openModal.open}
+        style={{ paddingTop: 0, marginTop: 0 }}
+        onClose={() => setOpenModal({ open: false, data: null })}
+      >
+        <PrinterEdition
+          printer={openModal.data}
+          printersList={printers}
+          handleChangePrinter={handleClick}
+          onClose={() => setOpenModal({ open: false, data: null })}
+        />
+      </OModal>
+    </Container>
+  )
+}

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

@@ -0,0 +1,30 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  margin-bottom: 50px;
+`
+
+export const ContainerList = 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 0px 10px;
+`;
+
+export const NoPrintersContainer = styled.View`
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 40px;
+  height: 100%;
+  flex: 1;
+`

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/StoresList/index.tsx

@@ -149,10 +149,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5, marginTop: 3 }}
+            style={{ marginRight: 5 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>

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

@@ -11,7 +11,8 @@ import {
   useToast,
   useLanguage,
   useUtils,
-  useConfig
+  useConfig,
+  useValidationFields
 } from 'ordering-components/native';
 import {
   CenterView,
@@ -24,6 +25,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 {
@@ -56,11 +58,12 @@ const ProfileUI = (props: ProfileParams) => {
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const [{ optimizeImage }] = useUtils();
-  const [{ configs }] = useConfig()
+  const [{ configs }] = useConfig();
+  const [{ loading }, { loadOriginalValidationFields }] = useValidationFields()
   const { errors } = useForm();
   const theme = useTheme();
 
-  const [phoneInputData, setPhoneInputData] = useState({
+  const [phoneInputData, setPhoneInputData] = useState<any>({
     error: '',
     phone: {
       country_phone_code: null,
@@ -75,11 +78,8 @@ const ProfileUI = (props: ProfileParams) => {
   const allowDriverUpdateData = user?.level !== 4 || configs?.allow_driver_update_data?.value === "1"
   useEffect(() => {
     if (phoneInputData.phone.cellphone) {
-      const codeNumberPhone = phoneInputData.phone.cellphone.slice(0, 3);
-      const numberPhone = phoneInputData.phone.cellphone.slice(
-        3,
-        phoneInputData.phone.cellphone?.length,
-      );
+      const codeNumberPhone = phoneInputData.phone.country_phone_code
+      const numberPhone = phoneInputData.phone.cellphone
       setPhoneToShow(`(${codeNumberPhone}) ${numberPhone}`);
     }
   }, [phoneInputData.phone.cellphone]);
@@ -261,15 +261,17 @@ const ProfileUI = (props: ProfileParams) => {
 
   return (
     <>
-      {validationFields?.error && (
+      {validationFields?.error && !loading && (
         <NotFoundSource
           content={
-            validationFields?.error[0] ||
-            validationFields?.error[0]?.message ||
+            validationFields?.error?.[0] ||
+            validationFields?.error?.[0]?.message ||
             t('NETWORK_ERROR', 'Network Error')
           }
           image={theme.images.general.notFound}
           conditioned={false}
+          onClickButton={() => loadOriginalValidationFields({ forceLoading: true })}
+          btnTitle={t('REFRESH_PROFILE', 'Refresh profile')}
         />
       )}
 
@@ -462,7 +464,6 @@ const ProfileUI = (props: ProfileParams) => {
                     />
 
                     <OText style={styles.label}>{t('PHONE', 'Phone')}</OText>
-
                     <OInput
                       isSecured={true}
                       placeholder={
@@ -503,17 +504,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={() => navigation.navigate('PrinterSetup')}>
+              <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 +551,9 @@ const ProfileUI = (props: ProfileParams) => {
             entireModal
             hideIcons
           >
-            <DriverSchedule schedule={user?.schedule} />
+            {!props.isBusinessApp && (
+              <DriverSchedule schedule={user?.schedule} />
+            )}
           </OModal>
         </ScrollView>
       )}

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
-import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import { TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTheme } from 'styled-components/native'
 import RNRestart from 'react-native-restart'
@@ -37,7 +37,7 @@ const SocketStatusUI = (props: any) => {
       paddingLeft: 0,
       paddingRight: 0,
       marginBottom: 30,
-      marginTop: 30
+      marginTop: Platform.OS === 'ios' ? 60 : 30
     },
   })
 

package/themes/business/src/components/shared/OTextarea.tsx

@@ -4,8 +4,10 @@ import { useTheme } from 'styled-components/native';
 
 const Wrapper = styled.View`
   border-radius: 10px;
-  border: 1px solid ${(props: any) => props.theme.colors.lightGray};
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.lightGray};
 `;
+
 const Inner = styled.TextInput`
   height: 100px;
   padding: 5px 10px 5px 10px;
@@ -29,16 +31,13 @@ const OTextarea = (props: Props) => {
         ref={props.textTareaRef}
         onFocus={() => props.onFocus()}
         onChangeText={(txt: any) => props.onChange(txt)}
-        textAlignVertical={'top'}
         placeholder={props.placeholder}
-        placeholderTextColor={theme.colors.arrowColor}
-        numberOfLines={props.lines}
-        underlineColorAndroid={'transparent'}
-        value={props.value}
+				placeholderTextColor={theme.colors.lightGray}
+				numberOfLines={props.lines}
+				underlineColorAndroid={'transparent'}
+				value={props.value}
+				multiline={true}
         autoFocus={props.autoFocus}
-        multiline={true}
-        selectionColor={theme.colors.primary}
-        color={theme.colors.textGray}
       />
     </Wrapper>
   );

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/layouts/SafeAreaContainer.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Dimensions,
   Platform,
   StatusBar,
-  StyleSheet,
   View,
 } from 'react-native';
-import styled from 'styled-components/native';
+import styled, { useTheme } from 'styled-components/native';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 export const SafeAreaContainer = styled.SafeAreaView`
   flex: 1;
@@ -14,6 +14,10 @@ export const SafeAreaContainer = styled.SafeAreaView`
 `;
 
 export const SafeAreaContainerLayout = (props: any) => {
+  const theme = useTheme();
+  const netInfo = useNetInfo()
+
+  const [statusColor, setStatusColor] = useState<string | null>(null)
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
       ? 'Portrait'
@@ -28,22 +32,34 @@ export const SafeAreaContainerLayout = (props: any) => {
     }
   });
 
+  useEffect(() => {
+    if (netInfo.isConnected === false) {
+      setStatusColor(theme.colors.danger500)
+    }
+
+    if (netInfo.isConnected && statusColor) {
+      setStatusColor(theme.colors.success500)
+      setTimeout(() => {
+        setStatusColor(null)
+      }, 2000);
+    }
+  }, [netInfo.isConnected])
+
   return (
-    <>
-      <SafeAreaContainer>
-        <View
-          style={{
-            paddingHorizontal: 30,
-            paddingTop: 30,
-            paddingBottom: 0,
-            flex: 1,
-          }}>
-          <StatusBar
-            barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
-          />
-          {props.children}
-        </View>
-      </SafeAreaContainer>
-    </>
+    <SafeAreaContainer>
+      <View
+        style={{
+          paddingHorizontal: 30,
+          paddingTop: 0,
+          paddingBottom: 0,
+          flex: 1,
+        }}>
+        <StatusBar
+          barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
+          {...statusColor && ({ backgroundColor: statusColor })}
+        />
+        {props.children}
+      </View>
+    </SafeAreaContainer>
   );
 };

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 {
@@ -310,9 +311,9 @@ export interface OrdersOptionParams {
     cancelled?: Array<number>;
   };
   isBusinessApp?: boolean;
-  handleClickLogisticOrder: (status: number, orderId: number) => void,
-  logisticOrders: { orders: Array<any>, loading: boolean, error: Array<string> | string },
-  loadLogisticOrders: () => void;
+  handleClickLogisticOrder?: (status: number, orderId: number) => void,
+  logisticOrders?: { orders: Array<any>, loading: boolean, error: Array<string> | string },
+  loadLogisticOrders?: () => void;
   isLogisticActivated?: boolean;
   isAlsea?: boolean;
   checkNotification?: boolean;
@@ -320,6 +321,10 @@ export interface OrdersOptionParams {
   handleChangeOrderStatus?: () => void;
   handleSendCustomerReview?: () => void;
   orderDetailsProps?: any;
+  isNetConnected?: boolean;
+  isDriverApp?: boolean;
+  combineTabs?: boolean;
+  setCombineTabsState?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -391,7 +396,7 @@ export interface OrderDetailsParams {
   urlToShare?: string;
   messages?: any;
   handleAssignDriver?: (id: any) => {};
-  handleChangeOrderStatus?: (status: any) => {};
+  handleChangeOrderStatus?: (status: any, isAcceptOrReject: any) => {};
   order?: any;
   isFromRoot?: any;
   handleOrderRedirect?: () => {};
@@ -410,6 +415,8 @@ export interface OrderDetailsParams {
   orderTitle?: any;
   forceUpdate?: number;
   getPermissions?: any
+  loadMessages?: any;
+  notificationApp?: string
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -445,6 +452,7 @@ export interface MessagesParams {
   sendMessage?: any;
   canRead?: any;
   setCanRead?: any;
+  notificationApp?: string
   handleSend?: () => {};
   setImage?: (image: string | null) => {};
   setMessage?: (comment: string) => {};
@@ -495,7 +503,8 @@ export interface FloatingButtonParams {
   firstColorCustom?: string;
   secondColorCustom?: string;
   paddingBottomIos?: any;
-  isHideRejectButtons?: boolean
+  isHideRejectButtons?: boolean;
+  principalButtonColor?: string;
 }
 export interface MomentOptionParams {
   navigation: any;
@@ -596,6 +605,7 @@ export interface AcceptOrRejectOrderParams {
   isPage?: boolean
   navigation?: any
   route?: any
+  isLoadingOrder?: boolean
 }
 
 export interface MapViewParams {