teamdigitale/italia-app

View on GitHub
ts/navigation/AuthenticatedStackNavigator.tsx

Summary

Maintainability
D
3 days
Test Coverage
import {
  createStackNavigator,
  TransitionPresets
} from "@react-navigation/stack";
import React from "react";
import { Platform } from "react-native";
import WorkunitGenericFailure from "../components/error/WorkunitGenericFailure";
import { BarcodeScanScreen } from "../features/barcode/screens/BarcodeScanScreen";
import { CdcStackNavigator } from "../features/bonus/cdc/navigation/CdcStackNavigator";
import { CDC_ROUTES } from "../features/bonus/cdc/navigation/routes";
import {
  CgnActivationNavigator,
  CgnDetailsNavigator,
  CgnEYCAActivationNavigator
} from "../features/bonus/cgn/navigation/navigator";
import CGN_ROUTES from "../features/bonus/cgn/navigation/routes";
import { FciStackNavigator } from "../features/fci/navigation/FciStackNavigator";
import { FCI_ROUTES } from "../features/fci/navigation/routes";
import { IdPayBarcodeNavigator } from "../features/idpay/barcode/navigation/navigator";
import { IdPayBarcodeRoutes } from "../features/idpay/barcode/navigation/routes";
import { IdPayCodeNavigator } from "../features/idpay/code/navigation/navigator";
import { IdPayCodeRoutes } from "../features/idpay/code/navigation/routes";
import { IdPayConfigurationNavigator } from "../features/idpay/configuration/navigation/navigator";
import { IdPayConfigurationRoutes } from "../features/idpay/configuration/navigation/routes";
import {
  IDpayDetailsNavigator,
  IDPayDetailsRoutes
} from "../features/idpay/details/navigation";
import { IdPayOnboardingNavigator } from "../features/idpay/onboarding/navigation/navigator";
import { IdPayOnboardingRoutes } from "../features/idpay/onboarding/navigation/routes";
import { IdPayPaymentNavigator } from "../features/idpay/payment/navigation/navigator";
import { IdPayPaymentRoutes } from "../features/idpay/payment/navigation/routes";
import { IDPayPaymentCodeScanScreen } from "../features/idpay/payment/screens/IDPayPaymentCodeScanScreen";
import { IdPayUnsubscriptionNavigator } from "../features/idpay/unsubscription/navigation/navigator";
import { IdPayUnsubscriptionRoutes } from "../features/idpay/unsubscription/navigation/routes";
import UnsupportedDeviceScreen from "../features/lollipop/screens/UnsupportedDeviceScreen";
import { MessagesStackNavigator } from "../features/messages/navigation/MessagesNavigator";
import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
import { NOTIFICATIONS_ROUTES } from "../features/pushNotifications/navigation/routes";
import { WalletBarcodeNavigator } from "../features/payments/barcode/navigation/navigator";
import { PaymentsBarcodeRoutes } from "../features/payments/barcode/navigation/routes";
import { PaymentsCheckoutNavigator } from "../features/payments/checkout/navigation/navigator";
import { PaymentsCheckoutRoutes } from "../features/payments/checkout/navigation/routes";
import { PaymentsMethodDetailsNavigator } from "../features/payments/details/navigation/navigator";
import { PaymentsMethodDetailsRoutes } from "../features/payments/details/navigation/routes";
import { PaymentsOnboardingNavigator } from "../features/payments/onboarding/navigation/navigator";
import { PaymentsOnboardingRoutes } from "../features/payments/onboarding/navigation/routes";
import { PaymentsTransactionNavigator } from "../features/payments/transaction/navigation/navigator";
import { PaymentsTransactionRoutes } from "../features/payments/transaction/navigation/routes";
import ServicesNavigator from "../features/services/common/navigation/navigator";
import { SERVICES_ROUTES } from "../features/services/common/navigation/routes";
import { ZendeskStackNavigator } from "../features/zendesk/navigation/navigator";
import ZENDESK_ROUTES from "../features/zendesk/navigation/routes";
import { GalleryPermissionInstructionsScreen } from "../screens/misc/GalleryPermissionInstructionsScreen";
import { PaymentsTransactionBizEventsRoutes } from "../features/payments/bizEventsTransaction/navigation/routes";
import { PaymentsTransactionBizEventsNavigator } from "../features/payments/bizEventsTransaction/navigation/navigator";
import { useIOSelector } from "../store/hooks";
import {
  isCdcEnabledSelector,
  isCGNEnabledSelector,
  isFciEnabledSelector,
  isIdPayEnabledSelector
} from "../store/reducers/backendStatus";
import { isGestureEnabled } from "../utils/navigation";
import { ItwStackNavigator } from "../features/itwallet/navigation/ItwStackNavigator";
import { ITW_ROUTES } from "../features/itwallet/navigation/routes";
import { SearchScreen } from "../features/services/search/screens/SearchScreen";
import { FIMS_ROUTES, FimsNavigator } from "../features/fims/common/navigation";
import { MessagesSearchScreen } from "../features/messages/screens/MessagesSearchScreen";
import { SystemNotificationPermissionsScreen } from "../features/pushNotifications/screens/SystemNotificationPermissionsScreen";
import CheckEmailNavigator from "./CheckEmailNavigator";
import OnboardingNavigator from "./OnboardingNavigator";
import { AppParamsList } from "./params/AppParamsList";
import ProfileStackNavigator from "./ProfileNavigator";
import ROUTES from "./routes";
import { MainTabNavigator } from "./TabNavigator";
import WalletNavigator from "./WalletNavigator";

const Stack = createStackNavigator<AppParamsList>();

const hideHeaderOptions = {
  headerShown: false
};

const AuthenticatedStackNavigator = () => {
  const cdcEnabled = useIOSelector(isCdcEnabledSelector);
  const cgnEnabled = useIOSelector(isCGNEnabledSelector);
  const isFciEnabled = useIOSelector(isFciEnabledSelector);
  const isIdPayEnabled = useIOSelector(isIdPayEnabledSelector);

  return (
    <Stack.Navigator
      initialRouteName={ROUTES.MAIN}
      screenOptions={{
        gestureEnabled: false,
        headerMode: "screen"
      }}
    >
      <Stack.Screen
        name={ROUTES.MAIN}
        options={{ headerShown: false }}
        component={MainTabNavigator}
      />

      <Stack.Screen
        name={ROUTES.ONBOARDING}
        options={hideHeaderOptions}
        component={OnboardingNavigator}
      />

      <Stack.Screen
        name={ROUTES.CHECK_EMAIL}
        options={hideHeaderOptions}
        component={CheckEmailNavigator}
      />

      <Stack.Screen
        name={ROUTES.UNSUPPORTED_DEVICE}
        options={hideHeaderOptions}
        component={UnsupportedDeviceScreen}
      />

      <Stack.Screen
        name={MESSAGES_ROUTES.MESSAGES_NAVIGATOR}
        options={hideHeaderOptions}
        component={MessagesStackNavigator}
      />
      {/* This screen is outside the MessagesNavigator to change gesture and transion behaviour. */}

      <Stack.Screen
        name={NOTIFICATIONS_ROUTES.SYSTEM_NOTIFICATION_PERMISSIONS}
        component={SystemNotificationPermissionsScreen}
        options={{
          gestureEnabled: true,
          headerShown: true,
          presentation: "modal"
        }}
      />
      <Stack.Screen
        name={MESSAGES_ROUTES.MESSAGES_SEARCH}
        component={MessagesSearchScreen}
        options={{
          ...hideHeaderOptions,
          gestureEnabled: false,
          ...Platform.select({
            ios: {
              animationEnabled: false
            },
            default: undefined
          })
        }}
      />
      <Stack.Screen
        name={ROUTES.WALLET_NAVIGATOR}
        options={hideHeaderOptions}
        component={WalletNavigator}
      />
      <Stack.Screen
        name={SERVICES_ROUTES.SERVICES_NAVIGATOR}
        options={{ ...hideHeaderOptions, gestureEnabled: isGestureEnabled }}
        component={ServicesNavigator}
      />
      {/* This screen is outside the ServicesNavigator to change gesture and transion behaviour. */}
      <Stack.Screen
        name={SERVICES_ROUTES.SEARCH}
        component={SearchScreen}
        options={{
          ...hideHeaderOptions,
          gestureEnabled: false,
          ...Platform.select({
            ios: {
              animationEnabled: false
            },
            default: undefined
          })
        }}
      />

      <Stack.Screen
        name={ROUTES.PROFILE_NAVIGATOR}
        options={{
          ...hideHeaderOptions,
          ...TransitionPresets.SlideFromRightIOS,
          gestureEnabled: isGestureEnabled
        }}
        component={ProfileStackNavigator}
      />

      <Stack.Screen
        name={ROUTES.BARCODE_SCAN}
        component={BarcodeScanScreen}
        options={{
          headerShown: false,
          ...TransitionPresets.ModalSlideFromBottomIOS,
          gestureEnabled: false
        }}
      />

      <Stack.Screen
        name={ROUTES.GALLERY_PERMISSION_INSTRUCTIONS}
        component={GalleryPermissionInstructionsScreen}
        options={{
          gestureEnabled: isGestureEnabled
        }}
      />

      {cgnEnabled && (
        <Stack.Screen
          name={CGN_ROUTES.ACTIVATION.MAIN}
          options={hideHeaderOptions}
          component={CgnActivationNavigator}
        />
      )}

      {cgnEnabled && (
        <Stack.Screen
          name={CGN_ROUTES.DETAILS.MAIN}
          options={{ ...hideHeaderOptions, gestureEnabled: isGestureEnabled }}
          component={CgnDetailsNavigator}
        />
      )}

      {cgnEnabled && (
        <Stack.Screen
          name={CGN_ROUTES.EYCA.ACTIVATION.MAIN}
          options={hideHeaderOptions}
          component={CgnEYCAActivationNavigator}
        />
      )}

      <Stack.Screen
        name={ROUTES.WORKUNIT_GENERIC_FAILURE}
        options={hideHeaderOptions}
        component={WorkunitGenericFailure}
      />

      <Stack.Group
        screenOptions={{
          headerShown: false,
          presentation: "modal"
        }}
      >
        <Stack.Screen
          name={ZENDESK_ROUTES.MAIN}
          component={ZendeskStackNavigator}
        />
      </Stack.Group>

      <Stack.Screen
        name={FIMS_ROUTES.MAIN}
        options={hideHeaderOptions}
        component={FimsNavigator}
      />

      {cdcEnabled && (
        <Stack.Screen
          name={CDC_ROUTES.BONUS_REQUEST_MAIN}
          options={hideHeaderOptions}
          component={CdcStackNavigator}
        />
      )}

      {isFciEnabled && (
        <Stack.Screen
          name={FCI_ROUTES.MAIN}
          options={hideHeaderOptions}
          component={FciStackNavigator}
        />
      )}

      {isIdPayEnabled && (
        <>
          <Stack.Screen
            name={IdPayOnboardingRoutes.IDPAY_ONBOARDING_MAIN}
            component={IdPayOnboardingNavigator}
            options={{ gestureEnabled: isGestureEnabled, ...hideHeaderOptions }}
          />
          <Stack.Screen
            name={IDPayDetailsRoutes.IDPAY_DETAILS_MAIN}
            component={IDpayDetailsNavigator}
            options={{
              gestureEnabled: isGestureEnabled,
              ...hideHeaderOptions
            }}
          />
          <Stack.Screen
            name={IdPayConfigurationRoutes.IDPAY_CONFIGURATION_NAVIGATOR}
            component={IdPayConfigurationNavigator}
            options={{ gestureEnabled: isGestureEnabled, ...hideHeaderOptions }}
          />
          <Stack.Screen
            name={IdPayUnsubscriptionRoutes.IDPAY_UNSUBSCRIPTION_MAIN}
            component={IdPayUnsubscriptionNavigator}
            options={{ gestureEnabled: isGestureEnabled, ...hideHeaderOptions }}
          />
          {/*
            This screen is outside the IDPayPaymentNavigator to enable the slide from bottom animation.
            FIXME IOBP-383: Using react-navigation 6.x we can achive this using a Stack.Group inside the IDPayPaymentNavigator
          */}
          <Stack.Screen
            name={IdPayPaymentRoutes.IDPAY_PAYMENT_CODE_SCAN}
            component={IDPayPaymentCodeScanScreen}
            options={{
              ...hideHeaderOptions,
              ...TransitionPresets.ModalSlideFromBottomIOS,
              gestureEnabled: isGestureEnabled
            }}
          />
          <Stack.Screen
            name={IdPayPaymentRoutes.IDPAY_PAYMENT_MAIN}
            component={IdPayPaymentNavigator}
            options={{ gestureEnabled: false, ...hideHeaderOptions }}
          />
          <Stack.Screen
            name={IdPayCodeRoutes.IDPAY_CODE_MAIN}
            options={hideHeaderOptions}
            component={IdPayCodeNavigator}
          />
          <Stack.Screen
            name={IdPayBarcodeRoutes.IDPAY_BARCODE_MAIN}
            options={{
              gestureEnabled: isGestureEnabled,
              ...hideHeaderOptions
            }}
            component={IdPayBarcodeNavigator}
          />
        </>
      )}

      <Stack.Screen
        name={PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR}
        component={PaymentsOnboardingNavigator}
        options={{ gestureEnabled: isGestureEnabled, ...hideHeaderOptions }}
      />
      <Stack.Screen
        name={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR}
        component={PaymentsCheckoutNavigator}
        options={{
          gestureEnabled: isGestureEnabled,
          ...hideHeaderOptions
        }}
      />
      <Stack.Screen
        name={PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_NAVIGATOR}
        component={PaymentsMethodDetailsNavigator}
        options={{
          gestureEnabled: isGestureEnabled,
          ...hideHeaderOptions
        }}
      />
      <Stack.Screen
        name={PaymentsTransactionRoutes.PAYMENT_TRANSACTION_NAVIGATOR}
        component={PaymentsTransactionNavigator}
        options={{
          gestureEnabled: isGestureEnabled,
          ...hideHeaderOptions
        }}
      />
      <Stack.Screen
        name={
          PaymentsTransactionBizEventsRoutes.PAYMENT_TRANSACTION_BIZ_EVENTS_NAVIGATOR
        }
        component={PaymentsTransactionBizEventsNavigator}
        options={{
          gestureEnabled: isGestureEnabled,
          ...hideHeaderOptions
        }}
      />
      <Stack.Screen
        name={PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR}
        component={WalletBarcodeNavigator}
        options={{
          ...TransitionPresets.ModalSlideFromBottomIOS,
          gestureEnabled: isGestureEnabled,
          ...hideHeaderOptions
        }}
      />
      <Stack.Screen
        name={ITW_ROUTES.MAIN}
        component={ItwStackNavigator}
        options={{ gestureEnabled: isGestureEnabled, ...hideHeaderOptions }}
      />
    </Stack.Navigator>
  );
};

export default AuthenticatedStackNavigator;