@os1-platform/dispatch-mobile 1.3.11 → 2.0.0

package/lib/module/components/executiontasks/scan/sub_components/SummaryPage.js

@@ -0,0 +1,1092 @@
+import { View, Text, Dimensions } 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 { PROCEED_STATUS, SummaryPageTabs } from '../interfaces';
+import { StyleSheet } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import ERDropDown from './ERDropDown';
+import { getErcDropDownItems } from './DropDownUtils';
+import { DataProvider, LayoutProvider, RecyclerListView } from 'recyclerlistview';
+import SnackBarCustom, { SnackBarType } from '../../../widgets/SnackBarCustom';
+import TabsComponent 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';
+const dimensionsForScreen = Dimensions.get('screen');
+const createNewDataProvider = () => {
+  return new DataProvider((r1, r2) => r1.scanId !== r2.scanId);
+};
+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 => {
+  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();
+  const [selectedReason, setSelectedReason] = useState(); // reason code from ercSelector
+  const [reasonItems, setReasonItems] = useState(); // list of reason codes
+  const [editedReasonItems, setEditedReasonItems] = useState(); // 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 === null || selectedEventCode === void 0 ? void 0 : selectedEventCode.code) && (async () => {
+      let response = await getErcDropDownItems('REASON', props.ercSelector || [], selectedEventCode === null || selectedEventCode === void 0 ? void 0 : selectedEventCode.code);
+      if (response.length) {
+        setReasonItems(response);
+        setSelectedReason(response[0]);
+      } else {
+        setReasonItems([]);
+        setSelectedReason(undefined);
+      }
+    })();
+  }, [selectedEventCode === null || selectedEventCode === void 0 ? void 0 : selectedEventCode.code]);
+  const renderActionButtons = () => {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        borderTopWidth: 1,
+        borderTopColor: '#E0E3EB',
+        padding: 10
+      }
+    }, /*#__PURE__*/React.createElement(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`));
+  };
+  // END: Modal Handling for Summary Page
+
+  // START: Summary List Handling
+  const [searchParams, setSearchParams] = useState(INITIAL_SEARCH_PARAMS);
+  const [dataProvider, setDataProvider] = React.useState(createNewDataProvider());
+  const _layoutProvider = new LayoutProvider(index => 0, (type, dim) => {
+    dim.width = dimensionsForScreen.width / 1;
+    dim.height = 180; //dimensionsForScreen.height / 1;
+  });
+
+  const [activeTab, setActiveTab] = useState(SummaryPageTabs.PENDING);
+  const [scanList, setScanList] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [selectedEditItem, setSelectedEditItem] = useState();
+  const [editedEventCode, setEditedEventCode] = useState();
+  const [editedReason, setEditedReason] = useState(); // reason code from ercSelector
+  const [selectedItems, setSelectedItems] = useState({});
+  const [searchText, setSearchText] = useState('');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [isSearchCleared, setIsSearchCleared] = React.useState(false);
+  const [isRemoved, setIsRemoved] = useState(false);
+  const onChangeSearch = query => {
+    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 function () {
+    let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    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 => {
+            let updatedScanList = [];
+            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 === null || editedEventCode === void 0 ? void 0 : editedEventCode.code) && (async () => {
+      let response = await getErcDropDownItems('REASON', props.ercSelector || [], editedEventCode === null || editedEventCode === void 0 ? void 0 : editedEventCode.code);
+      if (response.length) {
+        // setReasonItems(response);
+        setEditedReasonItems(response);
+        setEditedReason(response[0]);
+      } else {
+        // setReasonItems([]);
+        setEditedReasonItems([]);
+        setEditedReason(undefined);
+      }
+    })();
+  }, [editedEventCode === null || editedEventCode === void 0 ? void 0 : 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 /*#__PURE__*/React.createElement(ModalWidget, {
+      showModal: showEditModal,
+      contentContainerStyle: {
+        marginStart: 40,
+        marginEnd: 40
+      },
+      title: {
+        label: 'Update'
+      },
+      renderChildren: () => {
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            marginHorizontal: 16,
+            marginBottom: 20
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            marginBottom: 16
+          }
+        }, /*#__PURE__*/React.createElement(ERDropDown, {
+          title: 'Event',
+          style: {
+            height: 50
+          },
+          selectedReason: editedEventCode,
+          items: props.eventCodeItems,
+          onItemChange: eventItem => {
+            if (eventItem !== null) setEditedEventCode(eventItem);
+          }
+        })), /*#__PURE__*/React.createElement(View, {
+          style: {
+            marginVertical: 20
+          }
+        }, /*#__PURE__*/React.createElement(ERDropDown, {
+          title: 'Reason',
+          style: {
+            height: 50
+          },
+          selectedReason: editedReason,
+          disabled: !editedReasonItems || !(editedReasonItems !== null && editedReasonItems !== void 0 && editedReasonItems.length) ? true : false,
+          items: editedReasonItems ?? [],
+          onItemChange: reasonItem => {
+            if (reasonItem !== null) setEditedReason(reasonItem);
+          }
+        })));
+      },
+      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 === null || editedReason === void 0 ? void 0 : 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 === null || editedReason === void 0 ? void 0 : 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 === null || editedReason === void 0 ? void 0 : 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 /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(View, {
+          style: {
+            marginHorizontal: 16,
+            marginBottom: 20
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            marginBottom: 16
+          }
+        }, /*#__PURE__*/React.createElement(ERDropDown, {
+          title: 'Event',
+          style: {
+            height: 50
+          },
+          selectedReason: selectedEventCode,
+          items: filterERCItems(props.eventCodeItems, 'FAILURE'),
+          onItemChange: eventItem => {
+            if (eventItem !== null) setSelectedEventCode(eventItem);
+          }
+        })), /*#__PURE__*/React.createElement(View, {
+          style: {
+            marginVertical: 20
+          }
+        }, /*#__PURE__*/React.createElement(ERDropDown, {
+          title: 'Reason',
+          style: {
+            height: 50
+          },
+          selectedReason: selectedReason,
+          disabled: !reasonItems || !(reasonItems !== null && reasonItems !== void 0 && reasonItems.length) ? true : false,
+          items: reasonItems ?? [],
+          onItemChange: reasonItem => {
+            if (reasonItem !== null) setSelectedReason(reasonItem);
+          }
+        })));
+      },
+      buttonStyle: {
+        zIndex: -1
+      },
+      primaryButton: {
+        label: 'Proceed',
+        styles: modalStyles.primaryButtonStyles,
+        onPress: () => {
+          props.handleSubmitET(PROCEED_STATUS.DELIVER_NOW, tabs[1].count, {
+            ec: (selectedEventCode === null || selectedEventCode === void 0 ? void 0 : selectedEventCode.code) || '',
+            rc: (selectedReason === null || selectedReason === void 0 ? void 0 : selectedReason.code) || ''
+          });
+          setShowERCModal(false);
+        }
+      },
+      secondaryButton: {
+        label: `Cancel`,
+        styles: modalStyles.secondaryButtonStyles,
+        onPress: () => {
+          setShowERCModal(false);
+        }
+      }
+    });
+  };
+  const renderRemoveShipmentModal = () => {
+    return /*#__PURE__*/React.createElement(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 => {
+              let updatedScanList;
+              const itemsRemoved = [];
+              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 = selectedItems[scanId];
+                  return item.index;
+                });
+                updatedScanList = scanList.filter((value, index) => !indexes.includes(index));
+              } else {
+                updatedScanList = scanList;
+              }
+              setDataProvider(dataProvider => {
+                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 => !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 = (_, scan, index) => {
+    const prefixedMergedObjectiveId = props.scanProps.route.params[RouteParams.ROOT_META_DATA].prefixedMergedObjectiveId;
+    return /*#__PURE__*/React.createElement(Card, {
+      key: scan.scanId,
+      title: `#${scan.scanId}`,
+      renderAdditionalHeader: () => {
+        if (scan.prefixedMergedObjectiveId && prefixedMergedObjectiveId !== scan.prefixedMergedObjectiveId) return /*#__PURE__*/React.createElement(AntDesign, {
+          name: "exclamationcircleo",
+          size: 16,
+          color: "#EA580C"
+        });else return /*#__PURE__*/React.createElement(React.Fragment, null);
+      },
+      Body: /*#__PURE__*/React.createElement(View, {
+        style: {
+          marginVertical: 10
+        }
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardField
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardFieldSubText
+      }, "Order ID:"), ' ', scan.orderId), /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardField
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardFieldSubText
+      }, "Client Name:"), scan.clientName), /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardField
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardFieldSubText
+      }, "Event:"), ' ', scan.eventCode), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardFieldSubText
+      }, "Reason:"), scan.reasonCode || '')),
+      editConfig: {
+        onEdit: props => {
+          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 => {
+          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 => {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.searchBar
+    }, /*#__PURE__*/React.createElement(SearchBar, {
+      searchText: searchText,
+      setSearchText: setSearchText,
+      placeholder: "Shipment ID",
+      onChangeSearch: searchText => debouncedChangeSearch(searchText),
+      onClear: () => {
+        setSearchQuery(() => {
+          setIsSearchCleared(true);
+          setSearchParams(INITIAL_SEARCH_PARAMS);
+          return '';
+        });
+      }
+    })), !isLoading && scanList && scanList.length > 0 ? /*#__PURE__*/React.createElement(RecyclerListView, {
+      layoutProvider: _layoutProvider,
+      dataProvider: dataProvider,
+      rowRenderer: (type, scanData, index) => rowRenderer(type, scanData, index),
+      onEndReached: async () => await onEndReached(),
+      onEndReachedThreshold: 0.5,
+      renderFooter: () => {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, isLoadingMore ? /*#__PURE__*/React.createElement(Text, {
+          style: {
+            padding: 10,
+            fontWeight: 'bold',
+            textAlign: 'center'
+          }
+        }, "Loading") : null);
+      }
+    }) : null, !isLoading && scanList.length === 0 ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(AntDesign, {
+      name: "filetext1",
+      size: 80,
+      color: "#E0E3EB"
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: '#3D445C',
+        fontFamily: Fonts.IBMPlexSans_500Medium,
+        fontStyle: 'normal',
+        fontWeight: '500',
+        fontSize: 16,
+        marginTop: 24
+      }
+    }, `You do not have any ${activeTab.toLowerCase()} shipments`), activeTab === SummaryPageTabs.PENDING ? /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: '#525B7A',
+        fontFamily: Fonts.IBMPlexSans_400Regular,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        fontSize: 14
+      }
+    }, "You can proceed to the next step now") : null) : null);
+  };
+  const renderTabItem = tab => {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.tabItem
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.tabText
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: activeTab === tab.title ? {
+        color: '#5B80F7'
+      } : {}
+    }, `${tab.title}`)), /*#__PURE__*/React.createElement(View, {
+      style: activeTab !== tab.title ? styles.tabCount : [styles.tabCount, {
+        backgroundColor: '#ECF0FF'
+      }]
+    }, /*#__PURE__*/React.createElement(Text, null, `${tab.count}`)));
+  };
+  // END: Summary List Handling
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderERCModal(), renderUnscannedShipmentModal(), renderEditERCModal(), renderRemoveShipmentModal(), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(TabsComponent, {
+    tabs: tabs,
+    initialTab: tabs[1],
+    onTabChange: currentTab => {
+      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 => {
+          const updatedScanList = [];
+          setDataProvider(dataProvider => {
+            if (dataProvider) return dataProvider.cloneWithRows(updatedScanList);else return dataProvider;
+          });
+          return updatedScanList;
+        });
+
+        // RESET SELECTED ITEMS
+        setSelectedItems({});
+        return currentTab;
+      });
+    },
+    renderTabItem: renderTabItem,
+    renderBody: renderBody
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      justifyContent: 'flex-end'
+    }
+  }, /*#__PURE__*/React.createElement(SnackBarCustom, {
+    type: snackBar.type,
+    message: `${snackBar.message}`,
+    visible: snackBar.show,
+    onDismiss: () => {
+      setSnackBar({
+        show: false,
+        message: '',
+        type: SnackBarType.SUCCESS
+      });
+    },
+    customBottom: 20
+  })), !selectedItems || Object.keys(selectedItems).length === 0 ? /*#__PURE__*/React.createElement(View, {
+    style: styles.bottomView
+  }, renderActionButtons()) : null, selectedItems && Object.keys(selectedItems).length && activeTab !== SummaryPageTabs.PENDING ? /*#__PURE__*/React.createElement(View, {
+    style: styles.removeBtnContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => setSelectedItems({}),
+    style: styles.removeSelection
+  }, /*#__PURE__*/React.createElement(Entypo, {
+    name: "cross",
+    size: 24,
+    color: "#3D445C"
+  })), /*#__PURE__*/React.createElement(Text, null, `${Object.keys(selectedItems).length} Selected`)), /*#__PURE__*/React.createElement(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")) : 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: Fonts.IBMPlexSans_600SemiBold,
+    fontStyle: 'normal',
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+    color: '#111111',
+    marginBottom: 10
+  },
+  subText: {
+    justifyContent: 'center',
+    fontFamily: 'IBMPlexSans_400Regular',
+    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: 'IBMPlexSans_400Regular',
+    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) {
+  for (const scanId in scans) {
+    const item = scans[scanId];
+    if (item.eventCode && item.eventCode !== '--') continue;else return false;
+  }
+  return true;
+}
+//# sourceMappingURL=SummaryPage.js.map