ordering-ui-react-native 0.21.83 → 0.21.84-release

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

@@ -36,7 +36,8 @@ export const UserFormDetailsUI = (props: any) => {
     handleCancelEdit,
     toggleIsEdit,
     isCheckout,
-    isAlsea
+    isAlsea,
+    allowDriverUpdateData
   } = props;
 
   const theme = useTheme();
@@ -66,9 +67,9 @@ export const UserFormDetailsUI = (props: any) => {
     const rules: any = {
       required: isRequiredField(field.code)
         ? t(
-            `VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
-            `${field.name} is required`,
-          ).replace('_attribute_', t(field.name, field.code))
+          `VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
+          `${field.name} is required`,
+        ).replace('_attribute_', t(field.name, field.code))
         : null,
     };
     if (field.code && field.code === 'email') {
@@ -261,90 +262,93 @@ export const UserFormDetailsUI = (props: any) => {
           sortInputFields({ values: validationFields?.fields?.checkout })
             .length > 0 && (
             <UDWrapper>
-              {sortInputFields({
-                values: validationFields.fields?.checkout,
-              }).map(
-                (field: any) =>
-                  showField &&
-                  showField(field.code) &&
-                  !isAlsea
-                  && (
-                    <React.Fragment key={field.id}>
-                      <OText style={styles.label}>
-                        {t(field?.code.toUpperCase(), field?.name)}
-                      </OText>
+              {allowDriverUpdateData && (
+                <>
+                  {sortInputFields({
+                    values: validationFields.fields?.checkout,
+                  }).map(
+                    (field: any) =>
+                      showField &&
+                      showField(field.code) &&
+                      !isAlsea
+                      && (
+                        <React.Fragment key={field.id}>
+                          <OText style={styles.label}>
+                            {t(field?.code.toUpperCase(), field?.name)}
+                          </OText>
 
-                      <Controller
-                        key={field.id}
-                        control={control}
-                        render={() => (
-                          <OInput
-                            name={field.code}
-                            placeholder={t(
-                              field.code.toUpperCase(),
-                              field?.name,
-                            )}
-                            placeholderTextColor={theme.colors.arrowColor}
-                            style={styles.inputStyle}
-                            icon={
-                              field.code === 'email'
-                                ? theme.images.general.email
-                                : theme.images.general.user
-                            }
-                            autoCapitalize={
-                              field.code === 'email' ? 'none' : 'sentences'
-                            }
-                            isDisabled={!isEdit}
-                            value={
-                              formState?.changes[field.code] ??
-                              (user && user[field.code]) ??
-                              ''
-                            }
-                            onChange={(val: any) => {
-                              field.code !== 'email'
-                                ? setValue(field.code, val.target.value)
-                                : setValue(
-                                    field.code,
-                                    val.target.value
-                                      .toLowerCase()
-                                      .replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''),
-                                  );
-                              field.code !== 'email'
-                                ? handleChangeInput(val)
-                                : handleChangeInput({
-                                    target: {
-                                      name: 'email',
-                                      value: val.target.value
+                          <Controller
+                            key={field.id}
+                            control={control}
+                            render={() => (
+                              <OInput
+                                name={field.code}
+                                placeholder={t(
+                                  field.code.toUpperCase(),
+                                  field?.name,
+                                )}
+                                placeholderTextColor={theme.colors.arrowColor}
+                                style={styles.inputStyle}
+                                icon={
+                                  field.code === 'email'
+                                    ? theme.images.general.email
+                                    : theme.images.general.user
+                                }
+                                autoCapitalize={
+                                  field.code === 'email' ? 'none' : 'sentences'
+                                }
+                                isDisabled={!isEdit}
+                                value={
+                                  formState?.changes[field.code] ??
+                                  (user && user[field.code]) ??
+                                  ''
+                                }
+                                onChange={(val: any) => {
+                                  field.code !== 'email'
+                                    ? setValue(field.code, val.target.value)
+                                    : setValue(
+                                      field.code,
+                                      val.target.value
                                         .toLowerCase()
-                                        .replace(
-                                          /[&,()%";:ç?<>{}\\[\]\s]/g,
-                                          '',
-                                        ),
-                                    },
-                                  });
-                            }}
-                            autoCorrect={field.code === 'email' && false}
-                            type={
-                              field.code === 'email'
-                                ? 'email-address'
-                                : 'default'
-                            }
-                            returnKeyType="done"
-                            autoCompleteType={
-                              field.code === 'email' ? 'email' : 'off'
-                            }
-                            selectionColor={theme.colors.primary}
-                            color={theme.colors.textGray}
+                                        .replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''),
+                                    );
+                                  field.code !== 'email'
+                                    ? handleChangeInput(val)
+                                    : handleChangeInput({
+                                      target: {
+                                        name: 'email',
+                                        value: val.target.value
+                                          .toLowerCase()
+                                          .replace(
+                                            /[&,()%";:ç?<>{}\\[\]\s]/g,
+                                            '',
+                                          ),
+                                      },
+                                    });
+                                }}
+                                autoCorrect={field.code === 'email' && false}
+                                type={
+                                  field.code === 'email'
+                                    ? 'email-address'
+                                    : 'default'
+                                }
+                                returnKeyType="done"
+                                autoCompleteType={
+                                  field.code === 'email' ? 'email' : 'off'
+                                }
+                                selectionColor={theme.colors.primary}
+                                color={theme.colors.textGray}
+                              />
+                            )}
+                            name={field.code}
+                            rules={getInputRules(field)}
+                            defaultValue={user && user[field.code]}
                           />
-                        )}
-                        name={field.code}
-                        rules={getInputRules(field)}
-                        defaultValue={user && user[field.code]}
-                      />
-                    </React.Fragment>
-                  ),
+                        </React.Fragment>
+                      ),
+                  )}
+                </>
               )}
-
               <OText style={styles.label}>{t('PASSWORD', 'Password')}</OText>
 
               <Controller
@@ -445,7 +449,7 @@ export const UserFormDetailsUI = (props: any) => {
                 </OText>
               )}
 
-              {!!showInputPhoneNumber && !isAlsea && (
+              {!!showInputPhoneNumber && !isAlsea && allowDriverUpdateData && (
                 <WrapperPhone>
                   <PhoneInputNumber
                     data={phoneInputData}
@@ -487,28 +491,28 @@ export const UserFormDetailsUI = (props: any) => {
             isEdit) ||
             (watchPassword?.length > 0 && watchConfirmPassword?.length > 0) ||
             formState?.loading) && (
-            <View style={{ flex: 1, marginLeft: 5 }}>
-              <OButton
-                text={
-                  formState.loading
-                    ? t('UPDATING', 'Updating')
-                    : t('UPDATE', 'Update')
-                }
-                bgColor={theme.colors.primary}
-                textStyle={{
-                  ...styles.btnText,
-                  color: formState.loading
-                    ? theme.colors.textGray
-                    : theme.colors.white,
-                }}
-                borderColor={theme.colors.primary}
-                isDisabled={formState.loading}
-                imgRightSrc={null}
-                style={styles.editButton}
-                onClick={handleSubmit(onSubmit)}
-              />
-            </View>
-          )}
+              <View style={{ flex: 1, marginLeft: 5 }}>
+                <OButton
+                  text={
+                    formState.loading
+                      ? t('UPDATING', 'Updating')
+                      : t('UPDATE', 'Update')
+                  }
+                  bgColor={theme.colors.primary}
+                  textStyle={{
+                    ...styles.btnText,
+                    color: formState.loading
+                      ? theme.colors.textGray
+                      : theme.colors.white,
+                  }}
+                  borderColor={theme.colors.primary}
+                  isDisabled={formState.loading}
+                  imgRightSrc={null}
+                  style={styles.editButton}
+                  onClick={handleSubmit(onSubmit)}
+                />
+              </View>
+            )}
         </EditButton>
       )}
     </>

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

@@ -11,6 +11,8 @@ import {
   useToast,
   useLanguage,
   useUtils,
+  useConfig,
+  useValidationFields
 } from 'ordering-components/native';
 import {
   CenterView,
@@ -23,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 {
@@ -47,17 +50,20 @@ const ProfileUI = (props: ProfileParams) => {
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
     isAlsea,
-    isHideDriverStatus
+    isShowDriverStatus,
+    navigation
   } = props;
 
   const [{ user, sessionLoading }] = useSession();
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const [{ optimizeImage }] = useUtils();
+  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,
@@ -69,14 +75,11 @@ const ProfileUI = (props: ProfileParams) => {
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneToShow, setPhoneToShow] = useState('');
   const [openModal, setOpenModal] = useState(false)
-
+  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]);
@@ -115,14 +118,14 @@ const ProfileUI = (props: ProfileParams) => {
         includeBase64: true,
       },
       (image: any) => {
-        const response = image?.assets[0];
-        if (response.didCancel) {
+        const response = image?.assets?.[0];
+        if (response?.didCancel) {
           console.log('User cancelled image picker');
-        } else if (response.errorMessage) {
+        } else if (response?.errorMessage) {
           console.log('ImagePicker Error: ', response.errorMessage);
           showToast(ToastType.Error, response.errorMessage);
         } else {
-          if (response.uri) {
+          if (response?.uri) {
             const url = `data:${response.type};base64,${response.base64}`;
             handleButtonUpdateClick(null, true, url);
           } else {
@@ -258,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')}
         />
       )}
 
@@ -351,14 +356,15 @@ const ProfileUI = (props: ProfileParams) => {
               height={150}
               style={{ borderRadius: 7.2 }}
             />
-
-            <OIconButton
-              icon={theme.images.general.camera}
-              borderColor={theme.colors.clear}
-              iconStyle={{ width: 21, height: 21 }}
-              style={{ maxWidth: 40 }}
-              onClick={() => handleImagePicker()}
-            />
+            {allowDriverUpdateData && (
+              <OIconButton
+                icon={theme.images.general.camera}
+                borderColor={theme.colors.clear}
+                iconStyle={{ width: 21, height: 21 }}
+                style={{ maxWidth: 40 }}
+                onClick={() => handleImagePicker()}
+              />
+            )}
           </CenterView>
 
           {user?.level === 4 && (
@@ -369,13 +375,13 @@ const ProfileUI = (props: ProfileParams) => {
                   adjustsFontSizeToFit
                   style={{ ...styles.label, paddingHorizontal: 0 }}>
                   {t(
-                    `${isHideDriverStatus ? 'NOT_' : ''}AVAILABLE_TO_RECEIVE_ORDERS`,
-                    `${isHideDriverStatus ? 'You are not ' : ''}Available to receive orders`
+                    `${!isShowDriverStatus ? 'NOT_' : ''}AVAILABLE_TO_RECEIVE_ORDERS`,
+                    `${!isShowDriverStatus ? 'You are not ' : ''}Available to receive orders`
                   )}
                 </OText>
               </View>
 
-              {!isHideDriverStatus && (
+              {isShowDriverStatus && (
                 <>
                   {userState.loadingDriver ? (
                     <ActivityIndicator size="small" color={theme.colors.primary} />
@@ -458,7 +464,6 @@ const ProfileUI = (props: ProfileParams) => {
                     />
 
                     <OText style={styles.label}>{t('PHONE', 'Phone')}</OText>
-
                     <OInput
                       isSecured={true}
                       placeholder={
@@ -481,6 +486,7 @@ const ProfileUI = (props: ProfileParams) => {
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
                 isAlsea={isAlsea}
+                allowDriverUpdateData={allowDriverUpdateData}
               />
             </View>
           )}
@@ -498,9 +504,34 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </EditButton>
           )}
-          <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+          {!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('SCHEDULE', 'Schedule')}</OText>
+              <OText size={16}>{t('SESSIONS', 'Sessions')}</OText>
               <AntDesignIcon size={18} name='right' />
             </View>
             <View style={{
@@ -520,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/OInput.tsx

@@ -64,6 +64,7 @@ interface Props extends TextInputProps {
   onSubmitEditing?: any;
   blurOnSubmit?: any;
   color?: any;
+  isValueSync?: boolean
 }
 
 const OInput = (props: Props): React.ReactElement => {
@@ -118,6 +119,7 @@ const OInput = (props: Props): React.ReactElement => {
         selectionColor={props.selectionColor}
         color={props.color}
         maxLength={props.maxLength || 1000}
+        value={props.isValueSync && props.value}
       />
 
       {props.iconRight && (

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: coords.latitude,
-            longitude: coords.longitude,
+            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,
           });
         },
@@ -63,9 +63,10 @@ export const useLocation = () => {
     watchId.current = GeoLocation.watchPosition(
       ({ coords }) => {
         if (!isMounted.current) return;
+        if (typeof coords.latitude !== 'number' || typeof coords.longitude !== 'number') return
         const location: Location = {
-          latitude: coords.latitude,
-          longitude: coords.longitude,
+          latitude: coords.latitude || 0,
+          longitude: coords.longitude || 0,
           speed: coords.speed,
         };
         setUserLocation(location);

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>
   );
 };