address-verification-app/src/common/BlockerScreen.tsx

import React, { ReactNode, useCallback, useState } from 'react';
import { AppState, Linking } from 'react-native';
import { useSelector } from 'react-redux';
import { RootState } from '../store/store';
import { IAppState } from '../reducer/metadataSlice';
import { getBuildVersion } from '../components/utlis/commonFunctions';
import BlockerInstructions from './BlockerInstructions';
import { BLOCKER_SCREEN_DATA, BuildFlavours, CLICKSTREAM_EVENT_NAMES } from './Constants';
import { useAppDispatch, useAppSelector } from '../hooks';
import { setIsDeviceLocationEnabled } from '../reducer/foregroundServiceSlice';
import { toast } from '../../RN-UI-LIB/src/components/toast';
import { locationEnabled } from '../components/utlis/DeviceUtils';
import BlockerScreenApps from '@screens/permissions/BlockerScreenApps';
import handleBlacklistedAppsForBlockingCosmos, { Apps } from '@services/blacklistedApps.service';
import { addClickstreamEvent } from '@services/clickstreamEventService';
import { setBlacklistedAppsInstalledData } from '@reducers/blacklistedAppsInstalledSlice';
import { GLOBAL } from '@constants/Global';
import AgentIdCardFlow from '@screens/AgentIdCard';
import { IdCardBlockStatus } from '@reducers/profileSlice';
import FullScreenLoader from '@rn-ui-lib/components/FullScreenLoader';
import { IUserRole } from '@reducers/userSlice';
import {
  deleteCachedApkFiles,
  downloadLatestApkAndGetFilePath,
  installApk,
  openFallbackLonghornLink,
} from '@actions/appDownloadAction';
import AppUpdate from './AppUpdate';

interface IBlockerScreen {
  children?: ReactNode;
}

const RETRY_GEOLOCATION_STEPS =
  'Unable to retrieve location. Kindly follow the given steps and try again.';

const BlockerScreen = (props: IBlockerScreen) => {
  const { isTimeSynced, isDeviceLocationEnabled } = useAppSelector(
    (state) => state.foregroundService
  );
  const { isWifiOrCellularOn, appState } = useAppSelector((state) => state.metadata);
  const approvalStatus = useAppSelector((state) => state.profile?.approvalStatus);
  const isLoading = useAppSelector((state) => state.profile?.isLoading);
  const roles = useAppSelector((state) => state.user?.agentRoles);
  const isFieldAgent =
    (roles?.length === 1 && roles.includes(IUserRole.ROLE_FIELD_AGENT)) ||
    roles.includes(IUserRole.ROLE_OMA);

  const [shouldUpdate, setShouldUpdate] = useState({
    newApkCachedUrl: '',
    switchToFallback: false,
  });

  const [showActionBtnLoader, setShowActionBtnLoader] = useState(false);
  const dispatch = useAppDispatch();

  const blacklistedAppsInstalled: Apps[] = useSelector((state: RootState) => {
    return state?.blacklistAppsInstalled?.blacklistedAppsInstalled || [];
  });
  const downloadLatestApp = async () => {
    let apkFileUrl;
    if (GLOBAL.BUILD_FLAVOUR.includes(BuildFlavours.FIELD_AGENTS)) {
      // Download app for Field agent
      apkFileUrl = await downloadLatestApkAndGetFilePath(BuildFlavours.FIELD_AGENTS);
    } else {
      // Download app for Calling agent
      apkFileUrl = await downloadLatestApkAndGetFilePath(BuildFlavours.CALLING_AGENTS);
    }
    if (apkFileUrl) {
      setShouldUpdate({ newApkCachedUrl: apkFileUrl, switchToFallback: false });
    } else {
      setShouldUpdate({ newApkCachedUrl: '', switchToFallback: true });
    }
  };

  const handleAppUpdate = () => {
    let fallbackLonghornUrl;
    if (GLOBAL.BUILD_FLAVOUR.includes('fieldAgents')) {
      fallbackLonghornUrl = appState?.fieldAgents?.currentProdAPK;
    } else {
      fallbackLonghornUrl = appState?.telecallingAgents?.currentProdAPK;
    }
    if (!shouldUpdate.newApkCachedUrl) {
      openFallbackLonghornLink(fallbackLonghornUrl);
      return;
    }
    installApk(shouldUpdate.newApkCachedUrl, (error) => {
      if (!error) {
        return;
      }
      openFallbackLonghornLink(fallbackLonghornUrl);
    });
  };

  React.useEffect(() => {
    if (!appState) return;
    const buildToCompare = GLOBAL.BUILD_FLAVOUR;
    if (!buildToCompare) return;
    let flavorToUpdate: IAppState;
    if (GLOBAL.BUILD_FLAVOUR.includes('fieldAgents')) {
      flavorToUpdate = appState?.fieldAgents;
    } else {
      flavorToUpdate = appState?.telecallingAgents;
    }

    if (!flavorToUpdate) return;
    const currentBuildNumber = getBuildVersion();

    if (
      currentBuildNumber &&
      !isNaN(currentBuildNumber) &&
      currentBuildNumber < flavorToUpdate.version
    ) {
      downloadLatestApp();
    } else {
      setShouldUpdate({
        newApkCachedUrl: '',
        switchToFallback: false,
      });
      deleteCachedApkFiles();
    }
  }, [appState]);

  React.useEffect(() => {
    const appStateChange = AppState.addEventListener('change', async (change) => {
      setTimeout(async () => {
        handleBlacklistedAppsForBlockingCosmos().then((blacklistedAppsInstalled) =>
          dispatch(
            setBlacklistedAppsInstalledData({ blacklistedAppsInstalled: blacklistedAppsInstalled })
          )
        );
      }, 3000);
    });
    return () => appStateChange.remove();
  }, []);

  React.useEffect(() => {
    if (!isWifiOrCellularOn) {
      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_INTERNET_BLOCKER_SCREEN_LOAD);
    }
  }, [isWifiOrCellularOn]);

  const handleOpenSettings = useCallback(async () => {
    await Linking.openSettings();
  }, []);

  const handleLocationAccess = async () => {
    setShowActionBtnLoader(true);
    const isLocationEnabled = await locationEnabled();
    if (isLocationEnabled) {
      dispatch(setIsDeviceLocationEnabled(isLocationEnabled));
    } else {
      setShowActionBtnLoader(false);
      toast({ type: 'info', text1: RETRY_GEOLOCATION_STEPS });
    }
  };

  if (shouldUpdate.newApkCachedUrl) {
    return <AppUpdate onAppUpdate={handleAppUpdate} />;
  }

  if (shouldUpdate.switchToFallback) {
    const { heading, instructions } = BLOCKER_SCREEN_DATA.UNINSTALL_APP;
    return (
      <BlockerInstructions
        heading={heading}
        instructions={instructions}
        actionBtn={{ title: 'Download New App', action: handleAppUpdate }}
      />
    );
  }

  if (!isTimeSynced) {
    const { heading, instructions } = BLOCKER_SCREEN_DATA.TIME_UNSYNC;
    return (
      <BlockerInstructions
        heading={heading}
        instructions={instructions}
        actionBtn={{ title: 'Go to settings', action: handleOpenSettings }}
      />
    );
  }

  if (!isDeviceLocationEnabled) {
    const { heading, instructions } = BLOCKER_SCREEN_DATA.DEVICE_LOCATION_OFF;
    return (
      <BlockerInstructions
        heading={heading}
        instructions={instructions}
        actionBtn={{
          title: 'Retry',
          action: handleLocationAccess,
          showLoader: showActionBtnLoader,
        }}
      />
    );
  }

  if (!isWifiOrCellularOn) {
    const { heading, instructions } = BLOCKER_SCREEN_DATA.DEVICE_WIFI_OR_CELLULAR_OFF;
    return (
      <BlockerInstructions
        heading={heading}
        instructions={instructions}
        actionBtn={{
          title: 'Go to settings',
          action: handleOpenSettings,
        }}
      />
    );
  }

  if (blacklistedAppsInstalled?.length > 0) {
    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_BLOCKER_SCREEN_LOADED_FOR_BLACKLISTED_APPS, {
      installedApps: blacklistedAppsInstalled,
    });
    return <BlockerScreenApps blacklistedAppsInstalled={blacklistedAppsInstalled} />;
  }
  if (
    IdCardBlockStatus[approvalStatus as keyof typeof IdCardBlockStatus] &&
    isFieldAgent &&
    !GLOBAL.IS_IMPERSONATED
  ) {
    return (
      <>
        <FullScreenLoader loading={isLoading} />
        <AgentIdCardFlow />
      </>
    );
  }

  return <>{props.children}</>;
};

export default BlockerScreen;