@os1-platform/dispatch-mobile 2.1.0 → 2.1.2

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

@@ -1,1059 +0,0 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  BackHandler,
-  Platform,
-} from 'react-native';
-import React, { useEffect, useRef, useState, useLayoutEffect } from 'react';
-import { DeliverState, type ScannerInput } from './ScanSchema';
-import {
-  CommonStyles,
-  Fonts,
-} from '../../../styles/executionTasks/CommonStyles';
-import ProgressDialog from '../../widgets/ProgressDialog';
-import { PLEASE_WAIT } from '../../../res/strings';
-import CScanner from './sub_components/CScanner';
-import {
-  checkForValidation,
-  clearScanOutput,
-  getBarCodeTypes,
-  getErrorMessage,
-  getEventType,
-  getScanETOutput,
-  getScanMappedOutput,
-  getScannedItemCount,
-  getShipmentData,
-  getSplitIds,
-  getUpdatedScanETOutput,
-  isETCompleted,
-  isReplacement,
-  resetObjective,
-  triggerScanEvent,
-  updatePendingSharedPreference,
-  updateSharedPreference,
-} from './utils';
-import SnackBarCustom, { SnackBarType } from '../../widgets/SnackBarCustom';
-import { Button, Modal, Portal, Provider } from 'react-native-paper';
-import { useFocusEffect } from '@react-navigation/native';
-import { isEmptyOrBlank } from '../../../utils/utils';
-import {
-  BlindScan,
-  MergedScan,
-  PROCEED_STATUS,
-  SCAN_STATUS,
-} from './interfaces';
-import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
-import {
-  EntityCode,
-  ExecutionTaskID,
-} from '../../../models/execTasks/ETConfig';
-import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
-import {
-  ADD_SHIPMENT,
-  EMPTY_AWB,
-  ER_MISSING,
-  INVALID_SHIPMENT,
-  MAX_SHIPMENT_REACHED,
-  SHIPMENT_ALREADY_ADDED,
-} from './constants';
-import ERDropDown, { ercItem } from './sub_components/ERDropDown';
-import {
-  getDefaultERCLabel,
-  getErcDropDownItems,
-} from './sub_components/DropDownUtils';
-import {
-  GO_BACK_EVENT_CODE,
-  REASON_NOT_USED,
-} from '../../../constants/constants';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import type { ScannerOutput } from './ScanSchema';
-import {
-  DispatchExecutor,
-  IDispatch,
-} from '@os1-platform/platform-coreos-execution-engine-sdk';
-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 GoBackModal from '../../../components/widgets/GoBackModal';
-import { hasGoBackConnector } from '../../../components/utils';
-import ToggleSwitch from 'toggle-switch-react-native';
-import ScanIcon from '../../../icons/ScanIcon';
-
-/**
- *
- * @param props interface ScannerInput
- * @returns JSX
- *
- * props has key validation which defines different UI cases
- * validation: interface Validation
- *
- * when validation.selectedIndex === 0 => Receives validation.logic as array of scans
- * when validation.selectedIndex === 1 => Receives validation.logic as validation regex
- * when validation.selectedIndex === 0 => Receives validation.logic as API
- */
-
-const ScanET = (props: ScannerInput) => {
-  const prefixedMergedObjectiveId =
-    props.route.params[RouteParams.ROOT_META_DATA].prefixedMergedObjectiveId;
-
-  const [isScreenLoaded, setIsScreenLoaded] = useState({
-    ercSelectorLoaded: false,
-    shipmentCountLoaded: false,
-    previousDataLoaded: false,
-  });
-  const isErcSelector = props.ercSelector ? true : false;
-  const isMultiObjectiveEnable = props.wfMeta?.enableMultiObjectiveFlow;
-  const allowMultiObjectivePartial =
-    (isMultiObjectiveEnable === true &&
-      props.additionalMultiConfig?.validationType === 'SUBSET_OF_LIST') ||
-    false;
-
-  const SINGLE_MODE_COUNT: number = props.meta?.singleModeCount || 1;
-  const [showScanList, setShowScanList] = useState(false); // To show shipments List
-  const [showProgress, setShowProgress] = useState(false); // To pause implementation while a barcode was scanned
-  const [showScanner, setShowScanner] = useState(true); // To show the barcode scanner on screen and refresh on successful scan
-  const [showCamera, setShowCamera] = useState(true);
-  const [scanText, setScanText] = useState(''); // Show scan text
-  const [snackBar, setSnackBar] = useState({
-    show: false,
-    type: SnackBarType.SUCCESS,
-    message: '',
-  });
-
-  /**
-   * scansMap: is used to add the scanned shipment related data on each scan.
-   * scansMap data structure (MergedScan) is the same format as the output of scanET alongwith jobId,
-   *    which is used to create the final output of the ET and pass the scanned id to each merged objective.
-   */
-
-  const [scansMap, setScansMap] = useState<Map<string, MergedScan>>(new Map());
-
-  const [scannedInput, setScannedInput] = useState<string>(''); // state to capture scan
-  const refInput = useRef<TextInput>(null);
-  const [selectedReason, setSelectedReason] = useState<ercItem>(); // reason code from ercSelector
-  const [selectedEventCode, setSelectedEventCode] = useState<ercItem>(); // reason code from ercSelector
-  const [reasonItems, setReasonItems] = useState<ercItem[]>(); // list of reason codes
-  const [eventCodeItems, setEventCodeItems] = useState<ercItem[]>(); // list of event codes
-
-  const [showBackModal, setShowBackModal] = useState(false);
-  const [showUnscannedShipmentModal, setShowUnscannedShipmentModal] =
-    useState(false);
-
-  const [shipmentCount, setShipmentCount] = useState({
-    scannedCount: 0,
-    totalCount: 0,
-  });
-  const [mergedScanETOutput, setMergedScanETOutput] = useState<ScannerOutput>(
-    {}
-  );
-
-  const fetchShipmentCount = async () => {
-    try {
-      const _shipmentCount = await DispatchExecutor.getScannedShipmentsCount(
-        props.mergedObjectiveId
-      );
-      if (_shipmentCount) {
-        setShipmentCount({
-          scannedCount: _shipmentCount.scannedCount || 0,
-          totalCount: _shipmentCount.totalCount || 0,
-        });
-        // setIsScreenLoaded((isScreenLoaded) => ({
-        //   ...isScreenLoaded,
-        //   shipmentCountLoaded: true,
-        // }));
-      }
-    } catch (error) {}
-  };
-
-  const fetchPreviousScannedData = async () => {
-    try {
-      const scanOutput = (await getScanMappedOutput()) || {};
-      setMergedScanETOutput(scanOutput[prefixedMergedObjectiveId] || {});
-    } catch (error) {}
-  };
-
-  const fetchERC = async () => {
-    if (props.ercSelector) {
-      try {
-        let response = await getErcDropDownItems(
-          'EVENT',
-          props.ercSelector || []
-        );
-        setEventCodeItems(response);
-        setSelectedEventCode(response[0]);
-      } catch (error) {}
-    }
-  };
-
-  const fetchAllData = async () => {
-    try {
-      await Promise.all([
-        fetchERC(),
-        fetchPreviousScannedData(),
-        fetchShipmentCount(),
-      ]);
-    } catch (error) {
-    } finally {
-      setIsScreenLoaded({
-        ercSelectorLoaded: true,
-        previousDataLoaded: true,
-        shipmentCountLoaded: true,
-      });
-    }
-  };
-
-  useEffect(() => {
-    fetchAllData();
-  }, []);
-
-  useEffect(() => props.showProgress(true), []);
-  useEffect(() => {
-    if (
-      isScreenLoaded.ercSelectorLoaded &&
-      isScreenLoaded.previousDataLoaded &&
-      isScreenLoaded.shipmentCountLoaded
-    ) {
-      props.showProgress(false);
-    }
-  }, [isScreenLoaded]);
-
-  useLayoutEffect(() => {
-    props.navigation.setOptions({
-      title: props.title,
-      headerLeft: () => {
-        return (
-          <Icon
-            onPress={() => {
-              if (
-                props.taskMeta?.enableGoBack &&
-                hasGoBackConnector(props.applicableReasons)
-              )
-                setShowBackModal(true);
-              else {
-                if (showScanList) setShowScanList(false);
-                else setShowUnscannedShipmentModal(true);
-              }
-            }}
-            name="arrow-back"
-            color={'black'}
-            size={25}
-            style={{
-              paddingRight: 15,
-              paddingTop: 5,
-            }}
-          />
-        );
-      },
-    });
-  }, [props.navigation, props.title, showScanList]);
-
-  useEffect(() => {
-    selectedEventCode?.code &&
-      (async () => {
-        let response = await getErcDropDownItems(
-          'REASON',
-          props.ercSelector || [],
-          selectedEventCode?.code
-        );
-        if (response.length) {
-          setReasonItems(response);
-          setSelectedReason(response[0]);
-        } else {
-          setReasonItems([]);
-          setSelectedReason(undefined);
-        }
-      })();
-  }, [selectedEventCode?.code]);
-
-  useEffect(() => {
-    scannedInput &&
-      (async () => {
-        await addScans();
-        setScannedInput('');
-        setScanText('');
-      })();
-    if (refInput) refInput.current?.focus();
-  }, [scannedInput]);
-
-  useEffect(() => {
-    if (!showCamera && refInput) refInput.current?.focus();
-  }, [showCamera]);
-
-  const handleSubmitET = async (
-    status: PROCEED_STATUS,
-    count: number,
-    erc: { ec: string; rc: string } | undefined
-  ) => {
-    if (status === PROCEED_STATUS.DELIVER_LATER) {
-      if (shipmentCount.scannedCount === 0) {
-        props.navigation.goBack();
-      } else {
-        const etOutput = await getScanETOutput(
-          mergedScanETOutput,
-          props.mergedObjectiveId,
-          eventCodeItems || [],
-          props.defaultERC,
-          DeliverState.DELIVERE_LATER,
-          true,
-          count
-        );
-        props.onSubmitET(etOutput);
-      }
-    } else {
-      if (shipmentCount.scannedCount < shipmentCount.totalCount) {
-        if (erc) {
-          const prefixedMergedObjectiveId =
-            props.route.params[RouteParams.ROOT_META_DATA]
-              .prefixedMergedObjectiveId;
-
-          const etOutput = await getScanETOutput(
-            mergedScanETOutput,
-            props.mergedObjectiveId,
-            eventCodeItems || [],
-            { eventCode: erc.ec, reasonCode: erc.rc },
-            DeliverState.DELIVER_NOW,
-            true,
-            count
-          );
-
-          let hasNextPage = true;
-          let offset = 0;
-          const limit = BULK_DATA_LIMIT;
-          let scans: IDispatch.IQueryWFIResponse = { data: [], totalCount: 0 };
-
-          const scannedData: any = [];
-          do {
-            scans = await DispatchExecutor.filterWFIData(
-              props.taskName,
-              [prefixedMergedObjectiveId],
-              limit,
-              offset
-            );
-
-            scans.data.forEach((scan) => {
-              scannedData.push({
-                groupId: scan.displayInfo.groupId,
-                jobId: scan.jobId,
-                shipmentFlow: scan.displayInfo.shipmentFlow,
-                scanValue: scan.scannableId,
-              });
-            });
-
-            offset += limit;
-            hasNextPage = scans.totalCount - offset + 1 > 0;
-          } while (hasNextPage);
-
-          triggerScanEvent(
-            'ON_SCAN',
-            props.route,
-            scannedData,
-            etOutput['default'].output
-          );
-
-          // UPDATE PENDING IN SHARED PREFERENCE MERGED_SCAN_OUTPUT
-          // updatePendingSharedPreference(eventType, prefixedMergedObjectiveId);
-
-          props.onSubmitET(etOutput);
-        }
-      } else {
-        if (shipmentCount.totalCount === 0) props.navigation.goBack();
-        else {
-          const etOutput = await getScanETOutput(
-            mergedScanETOutput,
-            props.mergedObjectiveId,
-            eventCodeItems || [],
-            props.defaultERC,
-            DeliverState.DELIVER_NOW,
-            false,
-            count
-          );
-          props.onSubmitET(etOutput);
-        }
-      }
-    }
-  };
-
-  const _handleBarCodeScanned = async (scan: string) => {
-    if (!isEmptyOrBlank(scan)) {
-      setShowScanner(false);
-      setScannedInput(scan);
-    }
-  };
-
-  const updateShipmentCount = async (
-    scannedCountChanged: number,
-    totalCountChanged: number,
-    type: 'SCAN' | 'REMOVE' = 'SCAN'
-  ) => {
-    if (type === 'SCAN') {
-      // UPDATE THE Count
-      setShipmentCount((_shipmentCount) => {
-        return {
-          scannedCount: _shipmentCount.scannedCount + scannedCountChanged,
-          totalCount: _shipmentCount.totalCount + totalCountChanged,
-        };
-      });
-    } else {
-      const currentIds = [
-        ...new Set([
-          ...props.mergedObjectiveId,
-          ...getSplitIds(mergedScanETOutput),
-          prefixedMergedObjectiveId,
-        ]),
-      ];
-      const _shipmentCount = await DispatchExecutor.getScannedShipmentsCount(
-        currentIds
-      );
-      if (_shipmentCount) {
-        setShipmentCount({
-          scannedCount: _shipmentCount.scannedCount || 0,
-          totalCount: _shipmentCount.totalCount || 0,
-        });
-        // setIsScreenLoaded((isScreenLoaded) => ({
-        //   ...isScreenLoaded,
-        //   shipmentCountLoaded: true,
-        // }));
-      }
-    }
-  };
-
-  const addScans = async () => {
-    const scan = scannedInput;
-    if (isEmptyOrBlank(scan)) {
-      // showToast('Empty AWB Code');
-      setSnackBar({
-        show: true,
-        message: EMPTY_AWB,
-        type: SnackBarType.FAILURE,
-      });
-      return;
-    }
-
-    if (isErcSelector && (!selectedEventCode || !selectedEventCode.code)) {
-      // showToast('Empty AWB Code');
-      setSnackBar({
-        show: true,
-        message: ER_MISSING.replace('<shipment_id>', scan),
-        type: SnackBarType.FAILURE,
-      });
-      return;
-    }
-
-    setShowProgress(true);
-    let isValidated = await checkForValidation(scan, props.validation);
-
-    if (isValidated) {
-      // NEW CODE
-      try {
-        const eventType = getEventType(
-          eventCodeItems || [],
-          selectedEventCode?.code || ''
-        );
-
-        const result = await DispatchExecutor.updateWIMapping(
-          prefixedMergedObjectiveId,
-          scan,
-          {
-            ec: selectedEventCode?.code || '',
-            rc: selectedReason?.code || '',
-          },
-          props.scanToMerge || false
-        );
-
-        if ('data' in result) {
-          const data: IDispatch.MappingUpdateResponse = result.data;
-          const {
-            message: { title, subTitle },
-          } = data;
-          if (subTitle) {
-            setSnackBar({
-              show: true,
-              message: `#${scan}\n${title}\n${subTitle}`,
-              type: SnackBarType.WARNING,
-            });
-          } else {
-            setSnackBar({
-              show: true,
-              message: `#${scan}\nShipment updated successfully!`,
-              type: SnackBarType.SUCCESS,
-            });
-          }
-
-          setScanText('');
-
-          const _scanOutput = await getUpdatedScanETOutput(
-            mergedScanETOutput,
-            result,
-            eventType,
-            selectedEventCode?.code || '',
-            selectedReason?.code || '',
-            props.route,
-            {
-              jobId: data.jobId,
-              displayInfo: data.displayInfo,
-              isScan: true,
-              scanId: scan,
-            }
-          );
-
-          // UPDATE SHARED PREFERENCE
-          updateSharedPreference(
-            eventType,
-            data.mwId,
-            prefixedMergedObjectiveId
-          );
-
-          // UPDATE SCAN OUTPUT
-          setMergedScanETOutput(_scanOutput);
-
-          // UPDATE THE Count
-          setShipmentCount((_shipmentCount) => {
-            return {
-              scannedCount: _shipmentCount.scannedCount + data.scanned,
-              totalCount: _shipmentCount.totalCount + data.total,
-            };
-          });
-        }
-      } catch (error: any) {
-        setScanText('');
-        if (props.exitOnError) {
-          setShowProgress(false);
-
-          const etOutput = await getScanETOutput(
-            mergedScanETOutput,
-            props.mergedObjectiveId,
-            eventCodeItems || [],
-            props.defaultERC,
-            DeliverState.CANCELLED,
-            false,
-            0
-          );
-
-          props.onSubmitET(etOutput);
-        } else {
-          setSnackBar({
-            show: true,
-            ...getErrorMessage(scan, error),
-          });
-        }
-      }
-    } else {
-      setScanText('');
-      if (props.exitOnError) {
-        setShowProgress(false);
-        const etOutput = await getScanETOutput(
-          mergedScanETOutput,
-          props.mergedObjectiveId,
-          eventCodeItems || [],
-          props.defaultERC,
-          DeliverState.CANCELLED,
-          false,
-          0
-        );
-
-        props.onSubmitET(etOutput);
-      } else {
-        setSnackBar({
-          show: true,
-          message: INVALID_SHIPMENT,
-          type: SnackBarType.FAILURE,
-        });
-      }
-    }
-
-    setShowProgress(false);
-  };
-
-  const renderActionButtons = () => {
-    // NEW CODE
-    return (
-      <View>
-        <Button
-          labelStyle={CommonStyles.nextButtonLabel}
-          style={CommonStyles.nextButton}
-          uppercase={false}
-          onPress={() => {
-            setSnackBar({
-              show: false,
-              message: '',
-              type: SnackBarType.SUCCESS,
-            });
-            setShowScanList(!showScanList);
-          }}
-        >
-          {`View Summary`}
-        </Button>
-      </View>
-    );
-  };
-
-  // Handle back-button click when scanList was being viewed
-  useFocusEffect(
-    React.useCallback(() => {
-      const onBackPress = () => {
-        if (showScanList) {
-          setShowScanList(false);
-          return true;
-        } else {
-          setShowUnscannedShipmentModal(true);
-          // props.navigation.goBack();
-          return true;
-        }
-      };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
-    }, [showScanList])
-  );
-
-  useEffect(() => {
-    if (showScanList) {
-      props.navigation.setOptions({
-        title: 'Summary',
-      });
-    } else {
-      props.navigation.setOptions({
-        title: `${props.title}`,
-      });
-    }
-  }, [showScanList]);
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout>;
-    if (!showScanner) {
-      timeout = setTimeout(() => {
-        setShowScanner(true);
-      }, 500);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [showScanner]);
-
-  const renderModal = () => {
-    return (
-      <GoBackModal
-        showModal={showBackModal}
-        setShowModal={setShowBackModal}
-        onSuccess={async () => {
-          const output = await getBaseETResponse(
-            EntityCode.SCAN,
-            false,
-            GO_BACK_EVENT_CODE,
-            '',
-            props.mergedObjectiveId,
-            ExecutionTaskID.SCAN
-          );
-          const _scanOutput = {
-            ['default']: { output, count: shipmentCount.totalCount },
-          };
-          props.onSubmitET(_scanOutput);
-          setShowBackModal(false);
-        }}
-        onFailure={() => setShowBackModal(false)}
-      />
-    );
-  };
-
-  // TODO: Modify to Modal Widget
-  const renderUnscannedShipmentModal = () => {
-    return (
-      <Portal>
-        <Modal
-          visible={showUnscannedShipmentModal}
-          dismissable={true}
-          contentContainerStyle={[
-            styles.modalContent,
-            { marginStart: 40, marginEnd: 40 },
-          ]}
-        >
-          <View style={styles.modalView}>
-            <View
-              style={{
-                justifyContent: 'center',
-                alignItems: 'center',
-                marginBottom: 10,
-              }}
-            >
-              <AntDesign name="exclamationcircleo" size={40} color="#D97706" />
-            </View>
-            <Text style={styles.titleText}>{'Exit scan flow?'}</Text>
-            <Text
-              style={[
-                styles.unscannedShipmentModalSubText,
-                { textAlign: 'center' },
-              ]}
-            >
-              {'All the progress made will be lost'}
-            </Text>
-
-            <Button
-              labelStyle={CommonStyles.nextButtonLabel}
-              style={{ ...CommonStyles.nextButton, marginTop: 20 }}
-              uppercase={false}
-              onPress={() => setShowUnscannedShipmentModal(false)}
-            >
-              Continue Scanning
-            </Button>
-            <TouchableOpacity
-              style={{
-                ...CommonStyles.cancelButton,
-                marginTop: 10,
-                height: 40,
-                borderRadius: 6,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-              onPress={async () => {
-                setSnackBar({
-                  show: false,
-                  message: '',
-                  type: SnackBarType.SUCCESS,
-                });
-
-                // Trigger Scan Removal Event
-                await resetObjective(props);
-
-                // Clear Scan
-                await Promise.all([
-                  clearScanOutput(prefixedMergedObjectiveId),
-                  DispatchExecutor.removeShipment(prefixedMergedObjectiveId),
-                ]);
-
-                props.navigation.goBack();
-              }}
-            >
-              <Text style={CommonStyles.cancelButtonLabel}>Exit Scan Flow</Text>
-            </TouchableOpacity>
-          </View>
-        </Modal>
-      </Portal>
-    );
-  };
-
-  const renderShipmentCount = () => {
-    return (
-      <View
-        style={{
-          justifyContent: 'flex-end',
-          marginStart: 10,
-          marginEnd: 10,
-          marginBottom: 10,
-        }}
-      >
-        {isMultiObjectiveEnable ||
-        props.scanMode === 'SINGLE' ||
-        props.validation.selectedIndex === 0 ||
-        props.scanCountLimit ? (
-          <Text>{`${shipmentCount.scannedCount}/${shipmentCount.totalCount} shipments scanned.`}</Text>
-        ) : props.validation.selectedIndex === 1 ||
-          props.validation.selectedIndex === 2 ? (
-          <Text>{`${shipmentCount.scannedCount} shipments scanned.`}</Text>
-        ) : null}
-      </View>
-    );
-  };
-
-  if (showScanList) {
-    return (
-      <Provider>
-        {renderModal()}
-        <View style={CommonStyles.mainContainer}>
-          <SummaryPage
-            ercSelector={props.ercSelector || []}
-            eventCodeItems={eventCodeItems ?? []}
-            handleSubmitET={handleSubmitET}
-            shipmentCount={shipmentCount}
-            updateShipmentCount={updateShipmentCount}
-            scanProps={props}
-            mergedScanETOutput={mergedScanETOutput}
-          />
-        </View>
-      </Provider>
-    );
-  } else {
-    return (
-      <Provider>
-        <View style={CommonStyles.mainContainer}>
-          {renderModal()}
-          {renderUnscannedShipmentModal()}
-          <ProgressDialog visible={showProgress} label={PLEASE_WAIT} />
-          <View style={{ flex: 1 }}>
-            {props.ercSelector && (
-              <View style={{ marginHorizontal: 16, marginBottom: 30 }}>
-                <View style={{ marginBottom: 16 }}>
-                  <ERDropDown
-                    title={'Event'}
-                    style={{ height: 50 }}
-                    selectedReason={selectedEventCode}
-                    items={eventCodeItems ?? []}
-                    onItemChange={(eventItem: ercItem | null) => {
-                      if (eventItem !== null) setSelectedEventCode(eventItem);
-                    }}
-                  />
-                </View>
-                <View style={{ marginVertical: 16 }}>
-                  <ERDropDown
-                    title={'Reason'}
-                    style={{ height: 50 }}
-                    selectedReason={selectedReason}
-                    disabled={
-                      !reasonItems || !reasonItems?.length ? true : false
-                    }
-                    items={reasonItems ?? []}
-                    onItemChange={(reasonItem: ercItem | null) => {
-                      if (reasonItem !== null) setSelectedReason(reasonItem);
-                    }}
-                  />
-                </View>
-              </View>
-            )}
-            <View style={styles.addShipmentStyle}>
-              <Text style={styles.toggleText}>Use camera for scanning</Text>
-              <ToggleSwitch
-                onColor="#5B80F7"
-                offColor="#E0E3EB"
-                isOn={showCamera}
-                onToggle={() => setShowCamera(!showCamera)}
-              />
-            </View>
-            <View
-              style={
-                showCamera
-                  ? [styles.cameraContainer, { backgroundColor: '#000' }]
-                  : styles.cameraContainer
-              }
-            >
-              {showCamera && showScanner ? (
-                <CScanner
-                  barCodeTypes={getBarCodeTypes(props)}
-                  onScanned={_handleBarCodeScanned}
-                />
-              ) : (
-                <>
-                  <View style={styles.scanIcon}>
-                    <ScanIcon />
-                    <Text
-                      style={{
-                        color: '#A3AAC2',
-                        fontFamily:
-                          Platform.OS === 'android'
-                            ? Fonts.IBMPlexSans_500Medium
-                            : 'IBMPlexSans-Medium',
-                        fontSize: 14,
-                        fontStyle: 'normal',
-                        fontWeight: '500',
-                      }}
-                    >
-                      Enter manually or use barcode scanner
-                    </Text>
-                  </View>
-                  <View style={styles.addShipmentStyle}>
-                    <TextInput
-                      returnKeyType={'done'}
-                      ref={refInput}
-                      onSubmitEditing={async () => {
-                        setScannedInput(scanText);
-                      }}
-                      value={scanText}
-                      onChangeText={setScanText}
-                      style={{
-                        borderColor: '#5B80F7',
-                        borderWidth: 1,
-                        borderRadius: 6,
-                        paddingVertical: 9,
-                        paddingHorizontal: 13,
-                        marginEnd: 20,
-                        flex: 1,
-                        fontSize: 16,
-                        fontFamily:
-                          Platform.OS === 'android'
-                            ? Fonts.IBMPlexSans_600SemiBold
-                            : 'IBMPlexSans-SemiBold',
-                        color: '#A3AAC2',
-                      }}
-                      placeholder={'Enter Shipment ID'}
-                    />
-                    <TouchableOpacity
-                      style={{
-                        borderColor: '#E0E3EB',
-                        borderWidth: 1,
-                        borderRadius: 6,
-                        paddingVertical: 9,
-                        paddingHorizontal: 17,
-                        alignSelf: 'center',
-                        justifyContent: 'center',
-                      }}
-                      onPress={async () => {
-                        setSnackBar({
-                          show: false,
-                          message: '',
-                          type: SnackBarType.SUCCESS,
-                        });
-                        setScannedInput(scanText);
-                      }}
-                    >
-                      <Text
-                        style={{
-                          fontSize: 14,
-                          fontFamily:
-                            Platform.OS === 'android'
-                              ? Fonts.IBMPlexSans_500Medium
-                              : 'IBMPlexSans-Medium',
-                          color: '#3D445C',
-                        }}
-                      >
-                        {'Apply'}
-                      </Text>
-                    </TouchableOpacity>
-                  </View>
-                </>
-              )}
-            </View>
-          </View>
-          <View style={{ justifyContent: 'flex-end' }}>
-            <SnackBarCustom
-              type={snackBar.type}
-              message={`${snackBar.message}`}
-              visible={snackBar.show}
-              onDismiss={() => {
-                setSnackBar({
-                  show: false,
-                  message: '',
-                  type: SnackBarType.SUCCESS,
-                });
-              }}
-              customBottom={20}
-            />
-          </View>
-          <View style={styles.bottomView}>
-            {renderShipmentCount()}
-            {renderActionButtons()}
-          </View>
-        </View>
-      </Provider>
-    );
-  }
-};
-
-export default ScanET;
-
-const styles = StyleSheet.create({
-  cameraContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: -1,
-  },
-  addShipmentStyle: {
-    marginVertical: 24,
-    marginHorizontal: 16,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    zIndex: -1,
-  },
-  bottomView: {
-    paddingBottom: 16,
-    justifyContent: 'flex-end',
-    marginVertical: 10,
-    marginHorizontal: 16,
-  },
-  addButtonLabel: {
-    color: '#3D445C',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_600SemiBold
-        : 'IBMPlexSans-SemiBold',
-    fontSize: 16,
-    fontWeight: '600',
-    lineHeight: 20,
-    letterSpacing: 1.56,
-    textAlign: 'center',
-    fontStyle: 'normal',
-  },
-  centerView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignContent: 'center',
-  },
-  modalContent: {
-    marginStart: 60,
-    marginEnd: 60,
-    flex: 1,
-    marginBottom: 60,
-  },
-  modalView: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderRadius: 9,
-  },
-  titleText: {
-    justifyContent: 'center',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_600SemiBold
-        : 'IBMPlexSans-SemiBold',
-    fontStyle: 'normal',
-    fontSize: 14,
-    lineHeight: 20,
-    textAlign: 'center',
-    color: '#111111',
-    marginBottom: 10,
-  },
-  subText: {
-    justifyContent: 'center',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_400Regular
-        : 'IBMPlexSans-Regular',
-    fontStyle: 'normal',
-    fontSize: 14,
-    letterSpacing: 0.25,
-    lineHeight: 20,
-    textAlign: 'center',
-    color: '#000000',
-    marginBottom: 10,
-  },
-  bottomButtons: {
-    justifyContent: 'space-between',
-    flexDirection: 'row',
-    marginTop: 8,
-  },
-  unscannedShipmentModalSubText: {
-    justifyContent: 'center',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_400Regular
-        : 'IBMPlexSans-Regular',
-    fontStyle: 'normal',
-    fontSize: 14,
-    letterSpacing: 0.25,
-    lineHeight: 20,
-    color: '#000000',
-    marginBottom: 10,
-  },
-  modalDefaultERCStyle: {
-    color: '#A3AAC2',
-    fontSize: 14,
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_400Regular
-        : 'IBMPlexSans-Regular',
-  },
-  toggleText: {
-    fontSize: 14,
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_500Medium
-        : 'IBMPlexSans-Medium',
-    color: '#3D445C',
-  },
-  scanIcon: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});