@os1-platform/dispatch-mobile 3.1.9 → 3.2.1

package/src/components/executiontasks/forms/FormGenerator.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect } from 'react';
 import {
   BackHandler,
   KeyboardAvoidingView,
@@ -13,7 +13,7 @@ import DateTimeWidget from './widgets/DateTimeWidget';
 import TimeRangeSelector from './widgets/TimeRangeSelector';
 import QRBarcodeScannerWidget from './widgets/QRBarcodeScannerWidget';
 import DropdownWidget from './widgets/DropdownWidget';
-import { Button, Modal, Portal, Provider } from 'react-native-paper';
+import { Button, Provider } from 'react-native-paper';
 import type { FormInputSchema } from './FormSchema';
 import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
 import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
@@ -26,13 +26,11 @@ import {
   Fonts,
 } from '../../../styles/executionTasks/CommonStyles';
 import SdkColors, { ColorTheme } from '../../../styles/SdkColors';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
 import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
-import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
-import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
 
 const customWidgets = {
   datePicker: DateTimeWidget,
@@ -61,9 +59,8 @@ const FormGenerator = (props: FormInputSchema) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 
@@ -80,9 +77,6 @@ const FormGenerator = (props: FormInputSchema) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
-              const cta = 'Back Arrow';
-              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
-
             }}
             name="arrow-back"
             color={'black'}
@@ -125,13 +119,10 @@ const FormGenerator = (props: FormInputSchema) => {
     <Provider>
       {renderModal()}
       <KeyboardAvoidingView style={CommonStyles.mainContainer}>
-        <ScrollView style={{ flex: 1, flexGrow: 1 }}>
+        <View style={{ flex: 1 }}>
+        <ScrollView style={{ flex: 1}}>
           <View
-            style={{
-              flex: 1,
-              padding: 20,
-            }}
-          >
+            style={{ flex: 1, padding: 20 }}>
             <FormContext.Provider
               value={{
                 ...defaultProps,
@@ -222,42 +213,35 @@ const FormGenerator = (props: FormInputSchema) => {
             </FormContext.Provider>
           </View>
         </ScrollView>
+        </View>
         <View style={styles.bottomView}>
-            <Button
-              style={[styles.mainBtnStyles, CommonStyles.nextButton]}
-              labelStyle={CommonStyles.nextButtonLabel}
-              mode={'contained'}
-              onPress={() => {
-                if (form.current) {
-                  setOnCancel(false);
-                  // @ts-ignore
-                  form.current.submit();
-                }
-                const cta = 'Proceed';
-                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
-  
-              }}
-            >
-              Proceed
-            </Button>
-            {(props.isSelfLoop == false) && <Button
-              style={[styles.mainBtnStyles, CommonStyles.cancelButton]}
-              labelStyle={CommonStyles.cancelButtonLabel}
-              mode={'outlined'}
-              onPress={() => {
-                if (form.current) {
-                  setOnCancel(true);
-                  // @ts-ignore
-                  form.current.submit();
-                }
-                const cta = 'Cancel';
-                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
-  
-              }}
-            >
-              Cancel
-            </Button>
-            }
+          <Button
+            style={[styles.mainBtnStyles, CommonStyles.nextButton]}
+            labelStyle={CommonStyles.nextButtonLabel}
+            mode={'contained'}
+            onPress={() => {
+              if (form.current) {
+                setOnCancel(false);
+                // @ts-ignore
+                form.current.submit();
+              }
+            }}>
+            Proceed
+          </Button>
+          {(props.isSelfLoop == false) && <Button
+            style={[styles.mainBtnStyles, CommonStyles.cancelButton]}
+            labelStyle={CommonStyles.cancelButtonLabel}
+            mode={'outlined'}
+            onPress={() => {
+              if (form.current) {
+                setOnCancel(true);
+                // @ts-ignore
+                form.current.submit();
+              }
+            }}>
+            Cancel
+          </Button>
+          }
         </View>
       </KeyboardAvoidingView>
     </Provider>
@@ -283,18 +267,17 @@ const styles = StyleSheet.create({
   },
   bottomView: {
     flexDirection: 'row-reverse',
-    justifyContent: 'space-evenly',
+    justifyContent: 'space-between',
     padding: 16,
     backgroundColor: 'white',
     gap: 16,
   },
   mainBtnStyles: {
+    flexGrow: 1,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    flex: 1,
-    width: '100%',
     backgroundColor: 'white',
   },
 });

package/src/components/executiontasks/forms/widgets/QRBarcodeScannerWidget.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import type { WidgetProps } from '@rjsf/core';
 import { useFormContext } from 'rjsf-native';
-import { AntDesign } from '@expo/vector-icons';
+import AntDesign from '@react-native-vector-icons/ant-design';
 import CScanner from '../../scan/sub_components/CScanner';
 import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../../analytics/sentry/SentrySdkConstants';
 import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
@@ -103,7 +103,7 @@ function ScannerDialog(props: ScannerDialogProps) {
               }}
             />
             <AntDesign
-              name="closecircleo"
+              name="close-circle"
               size={40}
               color="blue"
               onPress={() => {

package/src/components/executiontasks/imageCapture/ImageCapture.tsx

@@ -4,8 +4,7 @@ import * as CaptureUtils from './CaptureUtils';
 import { getCaptureOutput } from './CaptureUtils';
 import { showToast } from '../../widgets/Toaster';
 import SdkColors, { ColorTheme } from '../../../styles/SdkColors';
-import Icon from 'react-native-vector-icons/Feather';
-import Iconn from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { CommonStyles, Fonts } from '../../../styles/executionTasks/CommonStyles';
 import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
 import { EntityCode, ExecutionTaskID } from '../../../models/execTasks/ETConfig';
@@ -53,9 +52,8 @@ const ImageCapture = (props: any) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 
@@ -64,7 +62,7 @@ const ImageCapture = (props: any) => {
       title: props.title,
       headerLeft: () => {
         return (
-          <Iconn
+          <Icon
             onPress={() => {
               if (
                 props.taskMeta?.enableGoBack &&
@@ -284,7 +282,7 @@ const ImageCapture = (props: any) => {
   //   }
   // }, [images, props, showCapture]);
 
-  const captureImage = useCallback(async (index) => {
+  const captureImage = useCallback(async (index: number) => {
     try {
       let imageDataResponse = await CaptureUtils.captureImage(
         props.resolution.breadth,

package/src/components/executiontasks/payments/completePayment/CompletePaymentET.tsx

@@ -27,7 +27,7 @@ import {
 import { getPaymentValue } from '../PaymentUtils';
 import { PaymentStyles } from '../PaymentStyles';
 import { GO_BACK_EVENT_CODE } from '../../../../constants/constants';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import GoBackModal from '../../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../../components/utils';
 import { useFocusEffect } from '@react-navigation/native';
@@ -54,9 +54,8 @@ const CompletePaymentET = (props: CompletePaymentInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/payments/init/InitPaymentET.tsx

@@ -17,7 +17,7 @@ import {
   Provider,
   RadioButton,
 } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { GO_BACK_EVENT_CODE } from '../../../../constants/constants';
 import { hasGoBackConnector } from '../../../../components/utils';
 import GoBackModal from '../../../../components/widgets/GoBackModal';
@@ -58,9 +58,8 @@ const InitPaymentET = (props: InitPaymentInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/payments/processPayment/ProcessPaymentET.tsx

@@ -18,7 +18,7 @@ import { isEmptyOrBlank } from '../../../../utils/utils';
 import { CommonStyles } from '../../../../styles/executionTasks/CommonStyles';
 import { getPaymentValue } from '../PaymentUtils';
 import { Button, Provider, TextInput } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { GO_BACK_EVENT_CODE } from '../../../../constants/constants';
 import GoBackModal from '../../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../../components/utils';
@@ -49,9 +49,8 @@ const ProcessPaymentET = (props: ProcessPaymentInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/pickup/PickupET.tsx

@@ -1,17 +1,11 @@
-import { FlatList, View } from 'react-native';
+import { View } from 'react-native';
 import React, { useState } from 'react';
 import type { PickupETInput } from './PickpSchema';
 import { Button, Card, Paragraph, TextInput, Title } from 'react-native-paper';
-import {
-  CommonStyles,
-  deliverETStyles,
-} from '../../../styles/executionTasks/CommonStyles';
+import { CommonStyles, deliverETStyles } from '../../../styles/executionTasks/CommonStyles';
 import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
 import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
-import {
-  EntityCode,
-  ExecutionTaskID,
-} from '../../../models/execTasks/ETConfig';
+import { EntityCode, ExecutionTaskID } from '../../../models/execTasks/ETConfig';
 import type { LineItem } from '../deliver/DeliverETInput';
 import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
 import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';

package/src/components/executiontasks/pickup/SLPickupET.tsx

@@ -20,7 +20,7 @@ import {
   DEFAULT_PICKUP_TITLE,
   GO_BACK_EVENT_CODE,
 } from '../../../constants/constants';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
@@ -77,9 +77,8 @@ const SLPickupET = (props: PickupETInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/scan/ScanET.tsx

@@ -68,7 +68,7 @@ import {
   GO_BACK_EVENT_CODE,
   REASON_NOT_USED,
 } from '../../../constants/constants';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import type { ScannerOutput } from './ScanSchema';
 import {
   DispatchExecutor,
@@ -77,7 +77,7 @@ import {
 import SummaryPage from './sub_components/SummaryPage';
 import { RouteParams } from '../../../ui/uiConfig/RouteParams';
 import { BULK_DATA_LIMIT } from '../../../manager/syncmanager/constants';
-import { AntDesign } from '@expo/vector-icons';
+import AntDesign from '@react-native-vector-icons/ant-design';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../components/utils';
 import ToggleSwitch from 'toggle-switch-react-native';
@@ -611,9 +611,8 @@ const ScanET = (props: ScannerInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [showScanList])
   );
 
@@ -686,7 +685,7 @@ const ScanET = (props: ScannerInput) => {
                 marginBottom: 10,
               }}
             >
-              <AntDesign name="exclamationcircleo" size={40} color="#D97706" />
+              <AntDesign name="exclamation-circle" size={40} color="#D97706" />
             </View>
             <Text style={styles.titleText}>{'Exit scan flow?'}</Text>
             <Text

package/src/components/executiontasks/scan/interfaces.ts

@@ -17,6 +17,22 @@ export enum ExpoBarcodeTypes {
   upc_e = 'upc_e',
 }
 
+export enum BarcodeType {
+  aztec = 'aztec',
+  ean13 = 'ean13',
+  ean8 = 'ean8',
+  qr = 'qr',
+  pdf417 = 'pdf417',
+  upc_e = 'upc_e',
+  datamatrix =  'datamatrix',
+  code39 = 'code39',
+  code93 = 'code93',
+  itf14 = 'itf14',
+  codabar = 'codabar',
+  code128 = 'code128',
+  upc_a = 'upc_a'
+}
+
 export enum SCAN_STATUS {
   SCANNED,
   FAILED,

package/src/components/executiontasks/scan/sub_components/CScanner.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
-import { BarCodeScanningResult, Camera } from 'expo-camera';
+import { BarcodeScanningResult } from 'expo-camera';
+import { CameraView } from 'expo-camera';
 import { isEmptyOrBlank } from '../../../../utils/utils';
 import { checkCameraPermissionUtil } from '../../imageCapture/CaptureUtils';
 import { Title } from 'react-native-paper';
@@ -27,7 +28,7 @@ const CScanner = (props: CScannerProps) => {
     })();
   }, []);
 
-  const _handleBarCodeScanned = (scan: BarCodeScanningResult) => {
+  const _handleBarCodeScanned = (scan: BarcodeScanningResult) => {
     if (!isEmptyOrBlank(scan.data)) {
       setVisible(false);
       props.onScanned(scan.data);
@@ -49,11 +50,11 @@ const CScanner = (props: CScannerProps) => {
   return (
     <>
       {isVisible ? (
-        <Camera
-          barCodeScannerSettings={{
-            barCodeTypes: props.barCodeTypes,
+        <CameraView
+        barcodeScannerSettings={{
+            barcodeTypes: props.barCodeTypes
           }}
-          onBarCodeScanned={_handleBarCodeScanned}
+          onBarcodeScanned={_handleBarCodeScanned}
           style={StyleSheet.absoluteFill}
         />
       ) : null}

package/src/components/executiontasks/scan/sub_components/DropDownUtils.ts

@@ -3,8 +3,8 @@ import ReasonCodeContainer from '../../../../manager/dispatchCodes/ReasonCodeCon
 import type { DefaultERC, ERCode } from '../ScanSchema';
 import EventCodeContainer from '../../../../manager/dispatchCodes/EventCodeContainer';
 import EventCodeRepo from '../../../../manager/dispatchCodes/EventCodeRepo';
-import ReasonCodeRepo from '../../../../manager/dispatchCodes/ReasonCodeRepo';
 import { ReasonsRow } from '../../../../manager/syncmanager/DBConfig';
+import ReasonCodeRepoIns from '../../../../manager/dispatchCodes/ReasonCodeRepo';
 
 export async function getErcDropDownItems(
   type: 'EVENT' | 'REASON',
@@ -60,7 +60,7 @@ export async function getErcDropDownItems(
   } else if (type === 'REASON' && eventCode) {
     const item = list.find((erc) => erc.eventCode === eventCode);
     const reasonCodesList = item?.reasonCode || [];
-    const reasonCodes = await ReasonCodeRepo.getInstance().getReasonsByCode(
+    const reasonCodes = await ReasonCodeRepoIns.getReasonsByCode(
       reasonCodesList
     );
     erc = reasonCodes.map((code: ReasonsRow) => ({

package/src/components/executiontasks/scan/sub_components/ERDropDown.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { Fonts } from '../../../../styles/executionTasks/CommonStyles';
 import { Platform, StyleSheet, Text, View } from 'react-native';
 import DropDownPicker from 'react-native-dropdown-picker';
-import FIcon from 'react-native-vector-icons/FontAwesome';
 
 function getDropDownItems(erItem: ercItem[]) {
   if (!erItem || erItem.length === 0) return [];

package/src/components/executiontasks/scan/sub_components/SummaryPage.tsx

@@ -1,7 +1,7 @@
 import { View, Text, Dimensions, Platform } from 'react-native';
 import React, { useState, useEffect } from 'react';
 import { Button } from 'react-native-paper';
-import { Entypo } from '@expo/vector-icons';
+import Entypo from '@react-native-vector-icons/entypo';
 import {
   CommonStyles,
   Fonts,
@@ -34,7 +34,7 @@ import {
   getTabCount,
   removeScan,
 } from '../utils';
-import { AntDesign } from '@expo/vector-icons';
+import AntDesign from '@react-native-vector-icons/ant-design';
 import ModalWidget from '../../../widgets/ModalWidget';
 import SearchBar from '../../../widgets/SearchBar';
 import { debounce } from 'lodash';
@@ -889,7 +889,7 @@ const SummaryPage = (props: SummaryPageProps) => {
             prefixedMergedObjectiveId !== scan.prefixedMergedObjectiveId
           )
             return (
-              <AntDesign name="exclamationcircleo" size={16} color="#EA580C" />
+              <AntDesign name="exclamation-circle" size={16} color="#EA580C" />
             );
           else return <></>;
         }}

package/src/components/executiontasks/scan/utils.ts

@@ -1,6 +1,6 @@
-import { BarCodeScanner } from 'expo-barcode-scanner';
 import {
   ADD_SCAN,
+  BarcodeType,
   ExpoBarcodeTypes,
   MergedScan,
   SCANNED_RECORD,
@@ -69,40 +69,40 @@ export function getBarCodeTypes(input: ScannerInput): any[] {
   scanType.forEach((type: ScannerType) => {
     switch (type) {
       case ExpoBarcodeTypes.QRCODE:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.qr);
+        barCodeType.push(BarcodeType.qr);
         break;
       case ExpoBarcodeTypes.aztec:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.aztec);
+        barCodeType.push(BarcodeType.aztec);
         break;
       case ExpoBarcodeTypes.codabar:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.codabar);
+        barCodeType.push(BarcodeType.codabar);
         break;
       case ExpoBarcodeTypes.code128:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.code128);
+        barCodeType.push(BarcodeType.code128);
         break;
       case ExpoBarcodeTypes.code39:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.code39);
+        barCodeType.push(BarcodeType.code39);
         break;
       case ExpoBarcodeTypes.code93:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.code93);
+        barCodeType.push(BarcodeType.code93);
         break;
       case ExpoBarcodeTypes.datamatrix:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.datamatrix);
+        barCodeType.push(BarcodeType.datamatrix);
         break;
       case ExpoBarcodeTypes.ean13:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.ean13);
+        barCodeType.push(BarcodeType.ean13);
         break;
       case ExpoBarcodeTypes.ean8:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.ean8);
+        barCodeType.push(BarcodeType.ean8);
         break;
       case ExpoBarcodeTypes.itf14:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.itf14);
+        barCodeType.push(BarcodeType.itf14);
         break;
       case ExpoBarcodeTypes.pdf417:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.pdf417);
+        barCodeType.push(BarcodeType.pdf417);
         break;
       case ExpoBarcodeTypes.upc_e:
-        barCodeType.push(BarCodeScanner.Constants.BarCodeType.upc_e);
+        barCodeType.push(BarcodeType.upc_e);
         break;
 
       default:

package/src/components/executiontasks/validateOTP/ValidateOTPET.tsx

@@ -111,6 +111,7 @@ const ValidateOTPET: FC<ValidateOTPInput> = (props) => {
   const [selectedContact, setSelectedContact] = useState<ContactTypes>(
     contactList[0] || null
   );
+  
   const [isContactVisited, setIsContactVisited] = useState<boolean>(
     props.doorstepOTP
   );
@@ -206,11 +207,15 @@ const ValidateOTPET: FC<ValidateOTPInput> = (props) => {
         isSelected: index === 0, // Select the first contact by default
       }));
 
+
+      
+      
     // Update the state with the filtered contacts
     setContactList(filteredContacts);
     if (props.doorstepOTP) {
       setSelectedContact(filteredContacts[0]);
     }
+    
   }, [contacts, props.doorstepOTP, props.otpDeliveryMethod]);
 
   // Monitor shouldNavigateBack to trigger navigation if set

package/src/components/executiontasks/validateOTP/ValidateOTPSchema.ts

@@ -9,7 +9,7 @@ import type {
   BaseETResponse,
 } from '../../../models/execTasks/ETBaseModels';
 import type { Headers, HTTPMethod } from '../httpRequest/HttpRequestETSchema';
-import { SnackBarType } from 'src/components/widgets/SnackBarCustom';
+import { SnackBarType } from '../../widgets/SnackBarCustom';
 
 export interface API {
   uri: string;

package/src/components/executiontasks/validateOTP/components/ContactListView.tsx

@@ -3,7 +3,7 @@
 import React, { FC, useEffect, useLayoutEffect } from 'react';
 import { BackHandler, FlatList, Text, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 
 // Styles
 import styles from '../ValidateOtpStyles';
@@ -29,16 +29,8 @@ export const ContactListView: FC<ValidateOTPInput> = (props) => {
   // Handle back-button click
   useFocusEffect(
     React.useCallback(() => {
-      BackHandler.addEventListener(
-        'hardwareBackPress',
-        props.handleBackNavigation
-      );
-      return () =>
-        BackHandler.removeEventListener(
-          'hardwareBackPress',
-          props.handleBackNavigation
-        );
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', props.handleBackNavigation);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/validateOTP/components/OTPView.tsx

@@ -3,7 +3,7 @@
 import React, { FC, useEffect, useLayoutEffect } from 'react';
 import { BackHandler, Text, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 
 // Components
 import OTPInput from '../sub-components/OTPInput';
@@ -125,9 +125,8 @@ export const OTPView: FC<ValidateOTPInput> = (props) => {
   // Handle back-button click
   useFocusEffect(
     React.useCallback(() => {
-      BackHandler.addEventListener('hardwareBackPress', handleBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
+      return () => backHandler.remove();
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
   );