@os1-platform/dispatch-mobile 2.0.8 → 2.1.1

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

@@ -0,0 +1,1059 @@
+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',
+  },
+});