address-verification-app/src/screens/auth/ProtectedRouter.tsx

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { _map } from '../../../RN-UI-LIB/src/utlis/common';
import { UnifiedCaseDetailsTypes, getCaseUnifiedData } from '../../action/caseApiActions';
import { getNotifications, notificationAction } from '../../action/notificationActions';
import { SCREEN_ANIMATION_DURATION } from '../../common/Constants';
import Widget from '../../components/form';
import { getScreenFocusListenerObj } from '../../components/utlis/commonFunctions';
import { getTemplateRoute } from '../../components/utlis/navigationUtlis';
import { useAppDispatch, useAppSelector } from '../../hooks';
import useFirestoreUpdates from '../../hooks/useFirestoreUpdates';
import useIsOnline from '../../hooks/useIsOnline';
import { resetNewVisitedCases } from '../../reducer/allCasesSlice';
import { RootState } from '../../store/store';
import Profile from '../Profile';
import AddNewNumber from '../addNewNumber';
import AddressGeolocation from '../addressGeolocation';
import NewAddressContainer from '../addressGeolocation/NewAddressContainer';
import AllCasesMain from '../allCases';
import CompletedCase from '../allCases/CompletedCase';
import { CaseAllocationType } from '../allCases/interface';
import CaseDetails from '../caseDetails/CaseDetails';
import CollectionCaseDetails from '../caseDetails/CollectionCaseDetail';
import CustomerProfile from '../caseDetails/CustomerProfile';
import VKYCFullScreen from '../caseDetails/VKYCFullScreen';
import FeedbackDetailContainer from '../caseDetails/feedback/FeedbackDetailContainer';
import interactionsHandler from '../caseDetails/interactionsHandler';
import EmiSchedule from '../emiSchedule';
import ImpersonatedUser from '../impersonatedUser';
import Notifications from '../notifications';
import RegisterPayments from '../registerPayements/RegisterPayments';
import TodoList from '../todoList/TodoList';
import UngroupedAddressContainer from '../addressGeolocation/UngroupedAddressContainer';

const Stack = createNativeStackNavigator();

export enum PageRouteEnum {
  PAYMENTS = 'registerPayments',
  ADDRESS_GEO = 'addressGeolocation',
  NEW_ADDRESS = 'newAddress',
  COLLECTION_CASE_DETAIL = 'collectionCaseDetail',
  EMI_SCHEDULE = 'EmiSchedule',
  PAST_FEEDBACK_DETAIL = 'pastFeedbackDetail',
  ADDITIONAL_ADDRESSES = 'additionalAddresses',
}

const ProtectedRouter = () => {
  const { newVisitedCases, caseDetails } = useAppSelector((state) => state.allCases);
  const { notificationsWithActions } = useAppSelector((state) => state.notifications);
  const isOnline = useIsOnline();
  const dispatch = useAppDispatch();
  const isTeamLead = useAppSelector((state) => state.user.isTeamLead);

  // Gets unified data for new visit plan cases
  // TODO: Move this to another place
  useEffect(() => {
    if (isTeamLead) {
      return;
    }
    if (newVisitedCases?.length) {
      const loanAccountNumbers: string[] = [];
      newVisitedCases.forEach((caseId) => {
        const { loanAccountNumber } = caseDetails[caseId];
        if (!loanAccountNumber) {
          return;
        }
        loanAccountNumbers.push(loanAccountNumber);
      });
      if (loanAccountNumbers.length) {
        const { EMI_SCHEDULE, REPAYMENTS, ADDRESS_AND_GEOLOCATIONS, FEEDBACKS } =
          UnifiedCaseDetailsTypes;
        dispatch(
          getCaseUnifiedData(loanAccountNumbers, [
            EMI_SCHEDULE,
            REPAYMENTS,
            ADDRESS_AND_GEOLOCATIONS,
            FEEDBACKS,
          ])
        );
      }
      dispatch(resetNewVisitedCases());
    }
  }, [newVisitedCases]);

  useEffect(() => {
    if (isOnline) {
      dispatch(getNotifications());
    }
  }, [isOnline]);

  // Check the queue of read action notifications in case of offline
  useEffect(() => {
    if (isOnline && notificationsWithActions.length) {
      dispatch(notificationAction(notificationsWithActions));
    }
  }, [isOnline, notificationsWithActions]);

  const avTemplate = useSelector(
    (state: RootState) => state.case.templateData[CaseAllocationType.ADDRESS_VERIFICATION_CASE]
  );

  const collectionTemplate = useSelector(
    (state: RootState) => state.case.templateData[CaseAllocationType.COLLECTION_CASE]
  );

  // This checks for unsubmitted feedbacks in case of offline and retry submitting them
  interactionsHandler();

  // Firestore listener hook
  useFirestoreUpdates();

  return (
    <Stack.Navigator
      screenOptions={{ freezeOnBlur: true, animation: 'none', animationDuration: 0 }}
    >
      <Stack.Screen
        name="Home"
        component={AllCasesMain}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name="Profile"
        component={Profile}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name="caseDetail"
        component={CaseDetails}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={PageRouteEnum.COLLECTION_CASE_DETAIL}
        component={CollectionCaseDetails}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={'customerProfile'}
        component={CustomerProfile}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={'vkycFull'}
        component={VKYCFullScreen}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={PageRouteEnum.PAYMENTS}
        component={RegisterPayments}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={PageRouteEnum.ADDRESS_GEO}
        component={AddressGeolocation}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={PageRouteEnum.NEW_ADDRESS}
        component={NewAddressContainer}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={PageRouteEnum.ADDITIONAL_ADDRESSES}
        component={UngroupedAddressContainer}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name={PageRouteEnum.PAST_FEEDBACK_DETAIL}
        component={FeedbackDetailContainer}
        options={{
          header: () => null,
          animationDuration: SCREEN_ANIMATION_DURATION,
          animation: 'none',
        }}
        listeners={getScreenFocusListenerObj}
      />
      {_map(avTemplate?.widget, (key) => (
        <Stack.Screen
          key={getTemplateRoute(key, CaseAllocationType.ADDRESS_VERIFICATION_CASE)}
          name={getTemplateRoute(key, CaseAllocationType.ADDRESS_VERIFICATION_CASE)}
          component={Widget}
          options={{
            header: () => null,
            animation: 'none',
            animationDuration: SCREEN_ANIMATION_DURATION,
          }}
          listeners={getScreenFocusListenerObj}
        />
      ))}
      {_map(collectionTemplate?.widget, (key) => (
        <Stack.Screen
          key={getTemplateRoute(key, CaseAllocationType.COLLECTION_CASE)}
          name={getTemplateRoute(key, CaseAllocationType.COLLECTION_CASE)}
          component={Widget}
          options={{
            header: () => null,
            animation: 'none',
            animationDuration: SCREEN_ANIMATION_DURATION,
          }}
          listeners={getScreenFocusListenerObj}
        />
      ))}
      <Stack.Screen
        name="TodoList"
        component={TodoList}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name="CompletedCases"
        component={CompletedCase}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name="EmiSchedule"
        component={EmiSchedule}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name="AddNewNumber"
        component={AddNewNumber}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name="Notifications"
        component={Notifications}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
      <Stack.Screen
        name="ImpersonatedUserLogin"
        component={ImpersonatedUser}
        options={{
          header: () => null,
          animation: 'none',
          animationDuration: SCREEN_ANIMATION_DURATION,
        }}
        listeners={getScreenFocusListenerObj}
      />
    </Stack.Navigator>
  );
};

export default ProtectedRouter;