@os1-platform/dispatch-mobile 2.1.1 → 2.1.2

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

@@ -1,1296 +0,0 @@
-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 {
-  CommonStyles,
-  Fonts,
-} from '../../../../styles/executionTasks/CommonStyles';
-import {
-  DisplaySummary,
-  ListItem,
-  PROCEED_STATUS,
-  SummaryPageTabs,
-} from '../interfaces';
-import { StyleSheet } from 'react-native';
-import { TouchableOpacity } from 'react-native';
-import ERDropDown, { ercItem } from './ERDropDown';
-import { getErcDropDownItems } from './DropDownUtils';
-import { ERCode, ScannerInput, ScannerOutput } from '../ScanSchema';
-import SdkColors, { ColorTheme } from '../../../../styles/SdkColors';
-import {
-  BaseDataProvider,
-  DataProvider,
-  LayoutProvider,
-  RecyclerListView,
-} from 'recyclerlistview';
-import SnackBarCustom, { SnackBarType } from '../../../widgets/SnackBarCustom';
-import TabsComponent, { Tab } from '../../../widgets/TabsComponent';
-import Card from '../../../widgets/Card';
-import {
-  addScans,
-  filterERCItems,
-  getScanData,
-  getTabCount,
-  removeScan,
-} from '../utils';
-import { AntDesign } from '@expo/vector-icons';
-import ModalWidget from '../../../widgets/ModalWidget';
-import SearchBar from '../../../widgets/SearchBar';
-import { debounce } from 'lodash';
-import { RouteParams } from '../../../../ui/uiConfig/RouteParams';
-import { IDispatchExecutor } from '@os1-platform/platform-coreos-execution-engine-sdk';
-import FileIcon from '../../../../icons/file';
-
-const dimensionsForScreen = Dimensions.get('screen');
-
-const createNewDataProvider = () => {
-  return new DataProvider((r1, r2) => r1.scanId !== r2.scanId);
-};
-
-interface SummaryPageProps {
-  shipmentCount: { scannedCount: number; totalCount: number };
-  updateShipmentCount: (
-    scannedCountChanged: number,
-    totalCountChanged: number,
-    type?: 'SCAN' | 'REMOVE'
-  ) => any;
-  handleSubmitET: (
-    status: PROCEED_STATUS,
-    count: number,
-    erc?: {
-      ec: string;
-      rc: string;
-    }
-  ) => void;
-  ercSelector: ERCode[];
-  eventCodeItems: ercItem[];
-  scanProps: ScannerInput;
-  mergedScanETOutput: ScannerOutput;
-}
-
-const INITIAL_TABS = [
-  { title: SummaryPageTabs.ALL, count: 0 },
-  { title: SummaryPageTabs.PENDING, count: 0 },
-  { title: SummaryPageTabs.DELIVERED, count: 0 },
-  { title: SummaryPageTabs.UNDELIVERED, count: 0 },
-];
-
-const INITIAL_SEARCH_PARAMS = {
-  hasNextPage: true,
-  offset: 0,
-  limit: 10,
-};
-
-const SummaryPage = (props: SummaryPageProps) => {
-  const [snackBar, setSnackBar] = useState({
-    show: false,
-    type: SnackBarType.SUCCESS,
-    message: '',
-  });
-  const [tabs, setTabs] = useState(INITIAL_TABS);
-
-  // START: Modal Handling for Summary Page
-
-  const [showUnscannedShipmentModal, setShowUnscannedShipmentModal] =
-    useState(false);
-  const [showERCModal, setShowERCModal] = useState(false);
-  const [showRemoveShipmentModal, setShowRemoveShipmentModal] = useState(false);
-
-  const [selectedEventCode, setSelectedEventCode] = useState<ercItem>();
-  const [selectedReason, setSelectedReason] = useState<ercItem>(); // reason code from ercSelector
-  const [reasonItems, setReasonItems] = useState<ercItem[]>(); // list of reason codes
-  const [editedReasonItems, setEditedReasonItems] = useState<ercItem[]>(); // list of reason codes
-  let { scannedCount, totalCount } = props.shipmentCount;
-  useEffect(() => {
-    props.ercSelector &&
-      (async () => {
-        setSelectedEventCode(props.eventCodeItems[0]);
-        setEditedEventCode(props.eventCodeItems[0]);
-      })();
-  }, [props.eventCodeItems]);
-  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]);
-
-  const renderActionButtons = () => {
-    return (
-      <View
-        style={{ borderTopWidth: 1, borderTopColor: '#E0E3EB', padding: 10 }}
-      >
-        <Button
-          labelStyle={CommonStyles.nextButtonLabel}
-          style={CommonStyles.nextButton}
-          uppercase={false}
-          onPress={() => {
-            if (scannedCount < totalCount) {
-              setShowUnscannedShipmentModal(true);
-            } else {
-              props.handleSubmitET(PROCEED_STATUS.DELIVER_NOW, tabs[1].count);
-            }
-          }}
-        >
-          {`Proceed`}
-        </Button>
-      </View>
-    );
-  };
-  // END: Modal Handling for Summary Page
-
-  // START: Summary List Handling
-  const [searchParams, setSearchParams] = useState(INITIAL_SEARCH_PARAMS);
-  const [dataProvider, setDataProvider] = React.useState<BaseDataProvider>(
-    createNewDataProvider()
-  );
-  const _layoutProvider = new LayoutProvider(
-    (index: any) => 0,
-    (type: any, dim: any) => {
-      dim.width = dimensionsForScreen.width / 1;
-      dim.height = 180; //dimensionsForScreen.height / 1;
-    }
-  );
-  const [activeTab, setActiveTab] = useState(SummaryPageTabs.PENDING);
-  const [scanList, setScanList] = useState<DisplaySummary[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [selectedEditItem, setSelectedEditItem] = useState<ListItem>();
-  const [editedEventCode, setEditedEventCode] = useState<ercItem>();
-  const [editedReason, setEditedReason] = useState<ercItem>(); // reason code from ercSelector
-  const [selectedItems, setSelectedItems] = useState<{
-    [id: string]: ListItem;
-  }>({});
-  const [searchText, setSearchText] = useState('');
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [isSearchCleared, setIsSearchCleared] = React.useState<boolean>(false);
-  const [isRemoved, setIsRemoved] = useState(false);
-  const onChangeSearch = (query: string) => {
-    setSearchQuery((oldQuery) => {
-      if (oldQuery.length > 1 && query.length === 0) {
-        setIsSearchCleared(true);
-      }
-      // RESET Search Params
-      setSearchParams(INITIAL_SEARCH_PARAMS);
-      return query;
-    });
-  };
-  const debouncedChangeSearch = debounce(onChangeSearch, 500);
-
-  const updateScanList = async (query: string = '') => {
-    try {
-      if (searchParams.hasNextPage) {
-        const { data: result, totalCount } = await getScanData(
-          activeTab,
-          props.scanProps,
-          searchParams.limit,
-          searchParams.offset,
-          query
-        );
-
-        if (query) {
-          setSearchParams((searchParams) => ({
-            hasNextPage: Boolean(
-              totalCount - (searchParams.offset + searchParams.limit) > 0
-            ),
-            offset: searchParams.offset + result.length,
-            limit: searchParams.limit,
-          }));
-          setScanList((scanList) => {
-            const updatedScanList = result;
-            setDataProvider((dataProvider) => {
-              return createNewDataProvider().cloneWithRows(updatedScanList);
-            });
-            return updatedScanList;
-          });
-        } else {
-          setSearchParams((searchParams) => ({
-            hasNextPage: Boolean(
-              totalCount - (searchParams.offset + searchParams.limit) > 0
-            ),
-            offset: searchParams.offset + result.length,
-            limit: searchParams.limit,
-          }));
-          setScanList((scanList: DisplaySummary[]) => {
-            let updatedScanList: DisplaySummary[] = [];
-            if (isSearchCleared) updatedScanList = [...result];
-            else updatedScanList = dataProvider.getAllData().concat(result);
-
-            setIsSearchCleared(false);
-            setDataProvider((dataProvider) => {
-              if (dataProvider)
-                return dataProvider.cloneWithRows(updatedScanList);
-              else return dataProvider;
-            });
-            return updatedScanList;
-          });
-        }
-      }
-    } catch (error) {
-    } finally {
-      props.scanProps.showProgress(false);
-    }
-  };
-
-  useEffect(() => {
-    (async () => {
-      const count = await getTabCount(props.scanProps);
-      setTabs([
-        { title: SummaryPageTabs.ALL, count: count[SummaryPageTabs.ALL] },
-        {
-          title: SummaryPageTabs.PENDING,
-          count: count[SummaryPageTabs.PENDING],
-        },
-        {
-          title: SummaryPageTabs.DELIVERED,
-          count: count[SummaryPageTabs.DELIVERED],
-        },
-        {
-          title: SummaryPageTabs.UNDELIVERED,
-          count: count[SummaryPageTabs.UNDELIVERED],
-        },
-      ]);
-    })();
-  }, []);
-
-  useEffect(() => {
-    (async () => {
-      props.scanProps.showProgress(true);
-
-      setIsLoading(true);
-      await updateScanList(searchQuery);
-      setIsLoading(false);
-
-      props.scanProps.showProgress(false);
-
-      if (isRemoved) setIsRemoved(false);
-    })();
-  }, [isRemoved, activeTab, searchQuery]);
-
-  useEffect(() => {
-    editedEventCode?.code &&
-      (async () => {
-        let response = await getErcDropDownItems(
-          'REASON',
-          props.ercSelector || [],
-          editedEventCode?.code
-        );
-        if (response.length) {
-          // setReasonItems(response);
-          setEditedReasonItems(response);
-          setEditedReason(response[0]);
-        } else {
-          // setReasonItems([]);
-          setEditedReasonItems([]);
-          setEditedReason(undefined);
-        }
-      })();
-  }, [editedEventCode?.code]);
-
-  // Triggered when the user reaches the end of the list
-  const onEndReached = async () => {
-    if (searchParams.hasNextPage === false || searchQuery.length > 0) return;
-
-    // Fetch more data when the user reaches the end of the list
-    setIsLoadingMore(true);
-    await updateScanList();
-    setIsLoadingMore(false);
-  };
-
-  const renderEditERCModal = () => {
-    return (
-      <ModalWidget
-        showModal={showEditModal}
-        contentContainerStyle={{ marginStart: 40, marginEnd: 40 }}
-        title={{ label: 'Update' }}
-        renderChildren={() => {
-          return (
-            <View style={{ marginHorizontal: 16, marginBottom: 20 }}>
-              <View style={{ marginBottom: 16 }}>
-                <ERDropDown
-                  title={'Event'}
-                  style={{ height: 50 }}
-                  selectedReason={editedEventCode}
-                  items={props.eventCodeItems}
-                  onItemChange={(eventItem: ercItem | null) => {
-                    if (eventItem !== null) setEditedEventCode(eventItem);
-                  }}
-                />
-              </View>
-              <View style={{ marginVertical: 20 }}>
-                <ERDropDown
-                  title={'Reason'}
-                  style={{ height: 50 }}
-                  selectedReason={editedReason}
-                  disabled={
-                    !editedReasonItems || !editedReasonItems?.length
-                      ? true
-                      : false
-                  }
-                  items={editedReasonItems ?? []}
-                  onItemChange={(reasonItem: ercItem | null) => {
-                    if (reasonItem !== null) setEditedReason(reasonItem);
-                  }}
-                />
-              </View>
-            </View>
-          );
-        }}
-        buttonStyle={modalStyles.buttonStyles}
-        primaryButton={{
-          label: 'Update',
-          styles: { ...modalStyles.editERCButton, marginStart: 5 },
-          onPress: async () => {
-            const scan = selectedEditItem;
-
-            props.scanProps.showProgress(true);
-            if (scan && editedEventCode && editedEventCode.code) {
-              // UPDATE OUTPUT
-
-              try {
-                const {
-                  status,
-                  message,
-                  type,
-                  data: scanResult,
-                } = await addScans(
-                  scan.scanId,
-                  props.scanProps,
-                  props.mergedScanETOutput,
-                  props.eventCodeItems,
-                  editedEventCode,
-                  editedReason
-                );
-                if (status === true) {
-                  // UPDATE COUNT OF TABS
-                  const count = await getTabCount(props.scanProps);
-                  setTabs([
-                    {
-                      title: SummaryPageTabs.ALL,
-                      count: count[SummaryPageTabs.ALL],
-                    },
-                    {
-                      title: SummaryPageTabs.PENDING,
-                      count: count[SummaryPageTabs.PENDING],
-                    },
-                    {
-                      title: SummaryPageTabs.DELIVERED,
-                      count: count[SummaryPageTabs.DELIVERED],
-                    },
-                    {
-                      title: SummaryPageTabs.UNDELIVERED,
-                      count: count[SummaryPageTabs.UNDELIVERED],
-                    },
-                  ]);
-
-                  // UPDATE THE Count
-                  props.updateShipmentCount(
-                    scanResult.shipmentCount.scannedCount,
-                    scanResult.shipmentCount.totalCount
-                  );
-
-                  if (activeTab === SummaryPageTabs.ALL) {
-                    setScanList((scanList) => {
-                      const updatedScanList = [...scanList];
-                      updatedScanList[scan.index] = {
-                        scanId: scan.scanId,
-                        orderId: scan.orderId || '--',
-                        clientName: scan.clientName || '--',
-                        eventCode: editedEventCode.text,
-                        reasonCode: editedReason?.text || '--',
-                        prefixedMergedObjectiveId:
-                          scan.prefixedMergedObjectiveId,
-                        lastStatus: scan.lastStatus,
-                      };
-                      setDataProvider((dataProvider) => {
-                        if (dataProvider)
-                          return dataProvider.cloneWithRows(updatedScanList);
-                        else return dataProvider;
-                      });
-
-                      return updatedScanList;
-                    });
-                  } else if (activeTab === SummaryPageTabs.PENDING) {
-                    setSearchParams({
-                      ...searchParams,
-                      offset: searchParams.offset - 1,
-                    });
-
-                    setScanList((scanList) => {
-                      let updatedScanList = dataProvider.getAllData();
-                      updatedScanList = updatedScanList.filter(
-                        (scanItem) => scanItem.scanId !== scan.scanId
-                      );
-                      // updatedScanList.splice(scan.index, 1);
-
-                      setDataProvider((dataProvider) => {
-                        if (dataProvider)
-                          return dataProvider.cloneWithRows(updatedScanList);
-                        else return dataProvider;
-                      });
-
-                      return updatedScanList;
-                    });
-                  } else if (activeTab === SummaryPageTabs.DELIVERED) {
-                    setScanList((scanList) => {
-                      let updatedScanList = dataProvider.getAllData();
-                      const successEvent = Boolean(editedEventCode.success);
-                      if (successEvent) {
-                        updatedScanList[scan.index] = {
-                          scanId: scan.scanId,
-                          orderId: scan.orderId || '--',
-                          clientName: scan.clientName || '--',
-                          eventCode: editedEventCode.text,
-                          reasonCode: editedReason?.text || '--',
-                          prefixedMergedObjectiveId:
-                            scan.prefixedMergedObjectiveId,
-                          lastStatus: scan.lastStatus,
-                        };
-                      } else {
-                        setSearchParams({
-                          ...searchParams,
-                          offset: searchParams.offset - 1,
-                        });
-                        updatedScanList = updatedScanList.filter(
-                          (scanItem) => scanItem.scanId !== scan.scanId
-                        );
-                      }
-                      setDataProvider((dataProvider) => {
-                        if (dataProvider)
-                          return dataProvider.cloneWithRows(updatedScanList);
-                        else return dataProvider;
-                      });
-
-                      return updatedScanList;
-                    });
-                  } else if (activeTab === SummaryPageTabs.UNDELIVERED) {
-                    setScanList((scanList) => {
-                      let updatedScanList = dataProvider.getAllData();
-                      const successEvent = Boolean(editedEventCode.success);
-                      if (!successEvent) {
-                        updatedScanList[scan.index] = {
-                          scanId: scan.scanId,
-                          orderId: scan.orderId || '--',
-                          clientName: scan.clientName || '--',
-                          eventCode: editedEventCode.text,
-                          reasonCode: editedReason?.text || '--',
-                          prefixedMergedObjectiveId:
-                            scan.prefixedMergedObjectiveId,
-                          lastStatus: scan.lastStatus,
-                        };
-                      } else {
-                        setSearchParams({
-                          ...searchParams,
-                          offset: searchParams.offset - 1,
-                        });
-
-                        updatedScanList = updatedScanList.filter(
-                          (scanItem) => scanItem.scanId !== scan.scanId
-                        );
-                      }
-                      setDataProvider((dataProvider) => {
-                        if (dataProvider)
-                          return dataProvider.cloneWithRows(updatedScanList);
-                        else return dataProvider;
-                      });
-
-                      return updatedScanList;
-                    });
-                  }
-
-                  setSnackBar({
-                    show: true,
-                    message:
-                      scan.eventCode !== '--'
-                        ? `#${scan.scanId}\nShipment updated successfully!`
-                        : message,
-                    type,
-                  });
-                } else {
-                  setSnackBar({
-                    show: true,
-                    message,
-                    type,
-                  });
-                }
-              } catch (error) {
-                setSnackBar({
-                  show: true,
-                  message: 'Some error occurred',
-                  type: SnackBarType.FAILURE,
-                });
-              }
-            } else {
-              setSnackBar({
-                show: true,
-                message: 'Some error occurred',
-                type: SnackBarType.FAILURE,
-              });
-            }
-
-            // RESET KEYS
-            props.scanProps.showProgress(false);
-            setSelectedEditItem(undefined);
-            setShowEditModal(false);
-            return;
-          },
-        }}
-        secondaryButton={{
-          label: 'Cancel',
-          styles: { ...modalStyles.editERCButton, marginEnd: 5 },
-          onPress: () => {
-            setShowEditModal(false);
-            setSelectedEditItem(undefined);
-          },
-        }}
-      />
-    );
-  };
-
-  const renderUnscannedShipmentModal = () => {
-    return (
-      <ModalWidget
-        showModal={showUnscannedShipmentModal}
-        title={{ label: 'Pending Shipments' }}
-        subTitle={{
-          label: `You still have ${tabs[1].count} unscanned shipment!`,
-          styles: { textAlign: 'center' },
-        }}
-        primaryButton={{
-          label: 'Continue without Scanning',
-          styles: modalStyles.primaryButtonStyles,
-          onPress: () => {
-            props.handleSubmitET(PROCEED_STATUS.DELIVER_LATER, tabs[1].count);
-          },
-        }}
-        secondaryButton={{
-          label: `Keep Scanning`,
-          styles: modalStyles.secondaryButtonStyles,
-          onPress: () => setShowUnscannedShipmentModal(false),
-        }}
-        // OLD CODE: When you wanted to update Undelivered shipments with a particular ERC got removed after: https://dev.azure.com/DelhiveryPlatform/Solutions/_workitems/edit/15669
-        // secondaryButton={{
-        //   label: `Mark as Undelivered`,
-        //   styles: modalStyles.secondaryButtonStyles,
-        //   onPress: () => {
-        //     setShowUnscannedShipmentModal(false);
-        //     setShowERCModal(true);
-        //   },
-        // }}
-        // renderAdditionalButtons={() => {
-        //   return (
-        //     <TouchableOpacity
-        //       style={{
-        //         marginBottom: 16,
-        //         height: 40,
-        //         borderRadius: 6,
-        //         justifyContent: 'center',
-        //         alignItems: 'center',
-        //       }}
-        //       onPress={() => setShowUnscannedShipmentModal(false)}
-        //     >
-        //       <Text
-        //         style={[
-        //           CommonStyles.cancelButtonLabel,
-        //           { color: SdkColors[ColorTheme.LIGHT].primaryButton },
-        //         ]}
-        //       >
-        //         Continue Scanning
-        //       </Text>
-        //     </TouchableOpacity>
-        //   );
-        // }}
-      />
-    );
-  };
-
-  const renderERCModal = () => {
-    return (
-      <ModalWidget
-        showModal={showERCModal}
-        contentContainerStyle={{ marginStart: 40, marginEnd: 40 }}
-        title={{ label: 'Mark as Undelivered' }}
-        subTitle={{
-          label: `The shipments shall be updated with the following:`,
-        }}
-        renderChildren={() => {
-          return (
-            <View style={{ marginHorizontal: 16, marginBottom: 20 }}>
-              <View style={{ marginBottom: 16 }}>
-                <ERDropDown
-                  title={'Event'}
-                  style={{ height: 50 }}
-                  selectedReason={selectedEventCode}
-                  items={filterERCItems(props.eventCodeItems, 'FAILURE')}
-                  onItemChange={(eventItem: ercItem | null) => {
-                    if (eventItem !== null) setSelectedEventCode(eventItem);
-                  }}
-                />
-              </View>
-              <View style={{ marginVertical: 20 }}>
-                <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>
-          );
-        }}
-        buttonStyle={{ zIndex: -1 }}
-        primaryButton={{
-          label: 'Proceed',
-          styles: modalStyles.primaryButtonStyles,
-          onPress: () => {
-            props.handleSubmitET(PROCEED_STATUS.DELIVER_NOW, tabs[1].count, {
-              ec: selectedEventCode?.code || '',
-              rc: selectedReason?.code || '',
-            });
-            setShowERCModal(false);
-          },
-        }}
-        secondaryButton={{
-          label: `Cancel`,
-          styles: modalStyles.secondaryButtonStyles,
-          onPress: () => {
-            setShowERCModal(false);
-          },
-        }}
-      />
-    );
-  };
-
-  const renderRemoveShipmentModal = () => {
-    return (
-      <ModalWidget
-        showModal={showRemoveShipmentModal}
-        contentContainerStyle={{ marginStart: 40, marginEnd: 40 }}
-        title={{ label: 'Remove Shipment' }}
-        subTitle={{
-          label: `${
-            Object.keys(selectedItems).length > 1
-              ? `Are you sure you want to remove the ${
-                  Object.keys(selectedItems).length
-                } shipments?`
-              : 'Are you sure you want to remove this shipment?'
-          }`,
-          styles: modalStyles.subTitleStyles,
-        }}
-        primaryButton={{
-          label: 'Proceed to Remove',
-          styles: modalStyles.primaryButtonStyles,
-          onPress: async () => {
-            props.scanProps.showProgress(true);
-
-            const prefixedMergedObjectiveId =
-              props.scanProps.route.params[RouteParams.ROOT_META_DATA]
-                .prefixedMergedObjectiveId;
-
-            try {
-              // REMOVE SCAN
-              await removeScan(
-                props.scanProps.taskName || '',
-                Object.keys(selectedItems),
-                props.scanProps.route,
-                props.mergedScanETOutput
-              );
-
-              // UPDATE THE Count
-              props.updateShipmentCount(
-                -Object.keys(selectedItems).length,
-                0,
-                'REMOVE'
-              );
-
-              // UPDATE COUNT OF TABS
-              const count = await getTabCount(props.scanProps);
-
-              setSearchParams({
-                ...searchParams,
-                offset: searchParams.offset - Object.keys(selectedItems).length,
-              });
-
-              // RESET SCAN LIST
-              setScanList((scanList: any) => {
-                let updatedScanList: any;
-                const itemsRemoved: string[] = [];
-
-                if (activeTab === SummaryPageTabs.ALL) {
-                  updatedScanList = [...scanList];
-
-                  Object.keys(selectedItems).forEach((scanId) => {
-                    const item = selectedItems[scanId]; // returns Display Summary with Index
-
-                    if (
-                      item.prefixedMergedObjectiveId !==
-                        prefixedMergedObjectiveId ||
-                      item.lastStatus ===
-                        IDispatchExecutor.ExecutionStatus.COMPLETED_FAILURE
-                    ) {
-                      itemsRemoved.push(item.scanId);
-                    } else {
-                      updatedScanList[item.index] = {
-                        scanId: item.scanId,
-                        orderId: item.orderId || '--',
-                        clientName: item.clientName || '--',
-                        eventCode: '--',
-                        reasonCode: '--',
-                      };
-                    }
-                  });
-                } else if (
-                  activeTab === SummaryPageTabs.DELIVERED ||
-                  activeTab === SummaryPageTabs.UNDELIVERED
-                ) {
-                  const indexes = Object.keys(selectedItems).map((scanId) => {
-                    const item: any = selectedItems[scanId];
-                    return item.index;
-                  });
-                  updatedScanList = scanList.filter(
-                    (value: any, index: number) => !indexes.includes(index)
-                  );
-                } else {
-                  updatedScanList = scanList;
-                }
-                setDataProvider((dataProvider: any) => {
-                  return dataProvider.cloneWithRows(updatedScanList);
-                });
-
-                setTabs([
-                  {
-                    title: SummaryPageTabs.ALL,
-                    count: count[SummaryPageTabs.ALL],
-                  },
-                  {
-                    title: SummaryPageTabs.PENDING,
-                    count: count[SummaryPageTabs.PENDING],
-                  },
-                  {
-                    title: SummaryPageTabs.DELIVERED,
-                    count: count[SummaryPageTabs.DELIVERED],
-                  },
-                  {
-                    title: SummaryPageTabs.UNDELIVERED,
-                    count: count[SummaryPageTabs.UNDELIVERED],
-                  },
-                ]);
-
-                // RESET MODAL
-                setShowRemoveShipmentModal(false);
-
-                // RESET SELECTED ITEMS
-                setSelectedItems({});
-
-                updatedScanList = updatedScanList.filter(
-                  (scan: DisplaySummary) => !itemsRemoved.includes(scan.scanId)
-                );
-
-                setDataProvider((dataProvider) => {
-                  if (dataProvider)
-                    return dataProvider.cloneWithRows(updatedScanList);
-                  else return dataProvider;
-                });
-
-                return updatedScanList;
-              });
-
-              // RESET MODAL
-              setShowRemoveShipmentModal(false);
-
-              // RESET SELECTED ITEMS
-              setSelectedItems({});
-
-              // RESET Loader
-              props.scanProps.showProgress(false);
-
-              // Show Success Message
-              setSnackBar({
-                show: true,
-                message: 'Selected items removed successfully!',
-                type: SnackBarType.SUCCESS,
-              });
-            } catch (error) {
-              // RESET MODAL
-              setShowRemoveShipmentModal(false);
-
-              setSnackBar({
-                show: true,
-                message: 'Some error occurred',
-                type: SnackBarType.FAILURE,
-              });
-            } finally {
-              props.scanProps.showProgress(false);
-            }
-          },
-        }}
-        secondaryButton={{
-          label: `Cancel`,
-          styles: modalStyles.secondaryButtonStyles,
-          onPress: () => {
-            setShowRemoveShipmentModal(false);
-          },
-        }}
-      />
-    );
-  };
-
-  const rowRenderer = (_: any, scan: DisplaySummary, index: number) => {
-    const prefixedMergedObjectiveId =
-      props.scanProps.route.params[RouteParams.ROOT_META_DATA]
-        .prefixedMergedObjectiveId;
-
-    return (
-      <Card
-        key={scan.scanId}
-        title={`#${scan.scanId}`}
-        renderAdditionalHeader={() => {
-          if (
-            scan.prefixedMergedObjectiveId &&
-            prefixedMergedObjectiveId !== scan.prefixedMergedObjectiveId
-          )
-            return (
-              <AntDesign name="exclamationcircleo" size={16} color="#EA580C" />
-            );
-          else return <></>;
-        }}
-        Body={
-          <View style={{ marginVertical: 10 }}>
-            <Text style={styles.cardField}>
-              <Text style={styles.cardFieldSubText}>Order ID:</Text>{' '}
-              {scan.orderId}
-            </Text>
-            <Text style={styles.cardField}>
-              <Text style={styles.cardFieldSubText}>Client Name:</Text>
-              {scan.clientName}
-            </Text>
-            <Text style={styles.cardField}>
-              <Text style={styles.cardFieldSubText}>Event:</Text>{' '}
-              {scan.eventCode}
-            </Text>
-            <Text>
-              <Text style={styles.cardFieldSubText}>Reason:</Text>
-              {scan.reasonCode || ''}
-            </Text>
-          </View>
-        }
-        editConfig={{
-          onEdit: (props: any) => {
-            if (selectedItems && Object.keys(selectedItems).length > 1) {
-              setSnackBar({
-                show: true,
-                message: 'Cannot Edit Multiple Items',
-                type: SnackBarType.FAILURE,
-              });
-            } else {
-              setSelectedItems({});
-              setShowEditModal(true);
-              setSelectedEditItem({ ...props, index });
-            }
-          },
-          props: scan,
-        }}
-        selectConfig={{
-          isSelected: selectedItems[scan.scanId] ? true : false,
-          onSelect: (props: DisplaySummary) => {
-            setSelectedItems((selectedItems) => {
-              // Unselect
-              if (selectedItems[props.scanId]) {
-                const _selectedItems = { ...selectedItems };
-                delete _selectedItems[props.scanId];
-                return _selectedItems;
-              } else {
-                return {
-                  ...selectedItems,
-                  [props.scanId]: { ...props, index },
-                };
-              }
-            });
-          },
-          props: scan,
-        }}
-      />
-    );
-  };
-
-  const renderBody = (currentTab: string) => {
-    return (
-      <View style={{ flex: 1 }}>
-        <View style={styles.searchBar}>
-          <SearchBar
-            searchText={searchText}
-            setSearchText={setSearchText}
-            placeholder="Shipment ID"
-            onChangeSearch={(searchText) => debouncedChangeSearch(searchText)}
-            onClear={() => {
-              setSearchQuery(() => {
-                setIsSearchCleared(true);
-                setSearchParams(INITIAL_SEARCH_PARAMS);
-                return '';
-              });
-            }}
-          />
-        </View>
-        {!isLoading && scanList && scanList.length > 0 ? (
-          <RecyclerListView
-            layoutProvider={_layoutProvider}
-            dataProvider={dataProvider}
-            rowRenderer={(type: any, scanData: any, index: number) =>
-              rowRenderer(type, scanData, index)
-            }
-            onEndReached={async () => await onEndReached()}
-            onEndReachedThreshold={0.5}
-            renderFooter={() => {
-              return (
-                <>
-                  {isLoadingMore ? (
-                    <Text
-                      style={{
-                        padding: 10,
-                        fontWeight: 'bold',
-                        textAlign: 'center',
-                      }}
-                    >
-                      Loading
-                    </Text>
-                  ) : null}
-                </>
-              );
-            }}
-          />
-        ) : null}
-        {!isLoading && scanList.length === 0 ? (
-          <View
-            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
-          >
-            <FileIcon />
-            <Text
-              style={{
-                color: '#3D445C',
-                fontFamily:
-                  Platform.OS === 'android'
-                    ? Fonts.IBMPlexSans_500Medium
-                    : 'IBMPlexSans-Medium',
-                fontStyle: 'normal',
-                fontWeight: '500',
-                fontSize: 16,
-                marginTop: 24,
-              }}
-            >{`You do not have any ${activeTab.toLowerCase()} shipments`}</Text>
-            {activeTab === SummaryPageTabs.PENDING ? (
-              <Text
-                style={{
-                  color: '#525B7A',
-                  fontFamily:
-                    Platform.OS === 'android'
-                      ? Fonts.IBMPlexSans_400Regular
-                      : 'IBMPlexSans-Regular',
-                  fontStyle: 'normal',
-                  fontWeight: '400',
-                  fontSize: 14,
-                }}
-              >
-                You can proceed to the next step now
-              </Text>
-            ) : null}
-          </View>
-        ) : null}
-      </View>
-    );
-  };
-
-  const renderTabItem = (tab: Tab) => {
-    return (
-      <View style={styles.tabItem}>
-        <View style={styles.tabText}>
-          <Text
-            style={activeTab === tab.title ? { color: '#5B80F7' } : {}}
-          >{`${tab.title}`}</Text>
-        </View>
-        <View
-          style={
-            activeTab !== tab.title
-              ? styles.tabCount
-              : [styles.tabCount, { backgroundColor: '#ECF0FF' }]
-          }
-        >
-          <Text>{`${tab.count}`}</Text>
-        </View>
-      </View>
-    );
-  };
-  // END: Summary List Handling
-
-  return (
-    <>
-      {renderERCModal()}
-      {renderUnscannedShipmentModal()}
-      {renderEditERCModal()}
-      {renderRemoveShipmentModal()}
-      <View style={{ flex: 1 }}>
-        <TabsComponent
-          tabs={tabs}
-          initialTab={tabs[1]}
-          onTabChange={(currentTab: string) => {
-            if (activeTab === currentTab) {
-              return;
-            }
-            // @ts-ignore
-            setActiveTab((activeTab) => {
-              // RESET Search TEXT
-              setSearchText('');
-              setSearchQuery('');
-
-              // RESET SEARCH PARAMS
-              setSearchParams(INITIAL_SEARCH_PARAMS);
-
-              // RESET SCAN LIST
-              setScanList((scanList: any) => {
-                const updatedScanList: any = [];
-                setDataProvider((dataProvider) => {
-                  if (dataProvider)
-                    return dataProvider.cloneWithRows(updatedScanList);
-                  else return dataProvider;
-                });
-                return updatedScanList;
-              });
-
-              // RESET SELECTED ITEMS
-              setSelectedItems({});
-
-              return currentTab;
-            });
-          }}
-          renderTabItem={renderTabItem}
-          renderBody={renderBody}
-        />
-      </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>
-      {!selectedItems || Object.keys(selectedItems).length === 0 ? (
-        <View style={styles.bottomView}>{renderActionButtons()}</View>
-      ) : null}
-      {selectedItems &&
-      Object.keys(selectedItems).length &&
-      activeTab !== SummaryPageTabs.PENDING ? (
-        <View style={styles.removeBtnContainer}>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginLeft: 10,
-            }}
-          >
-            <TouchableOpacity
-              onPress={() => setSelectedItems({})}
-              style={styles.removeSelection}
-            >
-              <Entypo name="cross" size={24} color="#3D445C" />
-            </TouchableOpacity>
-            <Text>{`${Object.keys(selectedItems).length} Selected`}</Text>
-          </View>
-          <Button
-            labelStyle={CommonStyles.mainExitButtonLabel}
-            style={[CommonStyles.mainExitButton, styles.removeBtn]}
-            onPress={() => {
-              if (canRemove(selectedItems)) setShowRemoveShipmentModal(true);
-              else {
-                setSnackBar({
-                  show: true,
-                  message: 'Cannot Remove unscanned shipment(s)',
-                  type: SnackBarType.FAILURE,
-                });
-              }
-            }}
-          >
-            Remove
-          </Button>
-        </View>
-      ) : null}
-    </>
-  );
-};
-
-export default SummaryPage;
-
-const styles = StyleSheet.create({
-  bottomView: {
-    paddingBottom: 16,
-    justifyContent: 'flex-end',
-    marginVertical: 10,
-    marginHorizontal: 16,
-  },
-  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,
-  },
-  tabItem: {
-    // width: 200,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 5,
-    marginHorizontal: 10,
-  },
-  activeTab: {
-    borderBottomWidth: 2,
-    borderBottomColor: 'blue',
-  },
-  tabText: {
-    fontSize: 16,
-    fontWeight: '400',
-    color: '#3D445C',
-    marginRight: 12,
-  },
-  tabCount: {
-    borderRadius: 50,
-    backgroundColor: '#E0E3EB',
-    paddingHorizontal: 15,
-    textAlign: 'center',
-  },
-  removeBtnContainer: {
-    borderTopWidth: 1,
-    borderTopColor: '#E0E3EB',
-    padding: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  removeSelection: {
-    marginRight: 20,
-  },
-  removeBtn: {
-    marginRight: 10,
-  },
-  searchBar: {
-    marginTop: 16,
-  },
-  cardField: {
-    marginBottom: 8,
-  },
-  cardFieldSubText: {
-    color: '#A3AAC2',
-  },
-});
-
-const modalStyles = StyleSheet.create({
-  primaryButtonStyles: {
-    marginTop: 16,
-    height: 40,
-    borderRadius: 6,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  secondaryButtonStyles: {
-    marginVertical: 16,
-    height: 40,
-    borderRadius: 6,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  subTitleStyles: { textAlign: 'center' },
-  buttonStyles: {
-    justifyContent: 'space-between',
-    flexDirection: 'row-reverse',
-    marginTop: 20,
-    zIndex: -1,
-  },
-  editERCButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-    height: 40,
-    borderRadius: 6,
-  },
-});
-
-function canRemove(scans: { [scanId: string]: DisplaySummary }): boolean {
-  for (const scanId in scans) {
-    const item = scans[scanId];
-    if (item.eventCode && item.eventCode !== '--') continue;
-    else return false;
-  }
-  return true;
-}