address-verification-app/src/screens/emiSchedule/index.tsx

import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
import React, { useEffect, useState } from 'react';
import Layout from '../layout/Layout';
import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
import NavigationHeader from '../../../RN-UI-LIB/src/components/NavigationHeader';
import { popToScreen } from '../../components/utlis/navigationUtlis';
import Text from '../../../RN-UI-LIB/src/components/Text';
import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
import EmiScheduleTab, { EmiSelectedTab } from './EmiScheduleTab';
import useIsOnline from '../../hooks/useIsOnline';
import OfflineScreen from '../../common/OfflineScreen';
import useRefresh from '../../hooks/useRefresh';
import { useAppDispatch, useAppSelector } from '../../hooks';
import { RootState } from '../../store/store';
import { BUSINESS_DATE_FORMAT, dateFormat } from '../../../RN-UI-LIB/src/utlis/dates';
import { formatAmount } from '../../../RN-UI-LIB/src/utlis/amount';
import { getCaseUnifiedData, UnifiedCaseDetailsTypes } from '../../action/caseApiActions';
import RepaymentsTab from './repayments/RepaymentsTab';
import { toast } from '../../../RN-UI-LIB/src/components/toast';
import { ToastMessages } from '../allCases/constants';
import CustomTabs from '../../../RN-UI-LIB/src/components/customTabs/CustomTabs';
import { addClickstreamEvent } from '@services/clickstreamEventService';
import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
import { CaseDetailStackEnum } from '@screens/caseDetails/CaseDetailStack';

export enum EmiScheduleTabs {
  SCHEDULE = 'schedule',
  REPAYMENTS = 'repayments',
}

const TABS = [
  {
    key: 'schedule',
    label: 'Schedule',
  },
  {
    key: 'repayments',
    label: 'Repayments',
  },
];

const PAGE_TITLE = 'EMI schedule';
interface IEmiSchedule {
  route: {
    params: {
      caseId: string;
      tabId?: EmiScheduleTabs;
      scheduleTabId?: EmiSelectedTab;
      notificationId?: string;
    };
  };
}
const EmiSchedule: React.FC<IEmiSchedule> = (props) => {
  const {
    route: {
      params: { caseId, tabId, scheduleTabId, notificationId },
    },
  } = props;
  const [currentTab, setCurrentTab] = useState<string>(tabId || EmiScheduleTabs.SCHEDULE);
  const { tenureMonths, disbursalDate, disbursementAmount, loanAccountNumber, customerName } =
    useAppSelector((state: RootState) => state.allCases.caseDetails[caseId] || {});

  const dispatch = useAppDispatch();
  const isOnline = useIsOnline();

  useEffect(() => {
    // If the user came to the screen via notification.
    if (notificationId) {
      if (tabId !== currentTab) {
        setCurrentTab(tabId || currentTab);
      }
      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_PUSH_NOTIFICATION_SCREEN_LOADED, {
        notificationId,
        caseId,
        tabId: tabId || currentTab,
        scheduleTabId,
        screenName: CaseDetailStackEnum.EMI_SCHEDULE,
      });
    }
  }, [notificationId]);

  const { refreshing, onRefresh } = useRefresh(() => {
    isOnline
      ? dispatch(
          getCaseUnifiedData(
            [loanAccountNumber],
            [UnifiedCaseDetailsTypes.EMI_SCHEDULE, UnifiedCaseDetailsTypes.REPAYMENTS]
          )
        )
      : toast({
          type: 'info',
          text1: ToastMessages.OFFLINE_MESSAGE,
        });
  });
  const emiData = useAppSelector((state) => state.emiSchedule?.[loanAccountNumber]?.data);
  const backHandler = () => {
    popToScreen(1);
  };
  const onTabChange = (tab: string) => {
    setCurrentTab(tab);
  };

  useEffect(() => {
    if (isOnline) {
      onRefresh();
    }
  }, [isOnline]);
  useEffect(() => {
    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_TOTAL_OUTSTANDING_BREAKUP_LOADED);
  }, []);

  if (!isOnline && !emiData) {
    return (
      <OfflineScreen
        goBack={backHandler}
        handleRetryEvent={() => onRefresh()}
        pageTitle={PAGE_TITLE}
      />
    );
  }

  return (
    <Layout>
      <SafeAreaView style={[GenericStyles.fill, styles.firstContainer]}>
        <NavigationHeader
          onBack={backHandler}
          title={PAGE_TITLE}
          subTitle={`For ${customerName}`}
        />
        <ScrollView
          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
          style={[
            GenericStyles.p16,
            GenericStyles.columnDirection,
            {
              minHeight: 190,
            },
          ]}
        >
          <Text light>Loan details</Text>
          <View style={[GenericStyles.row, GenericStyles.alignCenter, GenericStyles.mv16]}>
            <View>
              <Text dark bold style={[GenericStyles.fw500]}>
                {formatAmount(disbursementAmount)}
              </Text>
              <Text light>Amount</Text>
            </View>
            <View style={[styles.lineStyle, styles.line1]} />
            <View>
              <Text dark bold style={[GenericStyles.fw500]}>
                {tenureMonths ?? emiData?.length} months
              </Text>
              <Text light>Tenure</Text>
            </View>
            <View style={[styles.lineStyle, styles.line2]} />
            <View>
              <Text dark bold style={[GenericStyles.fw500]}>
                {dateFormat(new Date(disbursalDate ?? ''), BUSINESS_DATE_FORMAT)}
              </Text>
              <Text light>Start date</Text>
            </View>
          </View>
          <CustomTabs
            tabs={TABS}
            currentTab={currentTab}
            onTabChange={onTabChange}
            containerStyle={[GenericStyles.ml4, styles.pt31]}
          />
        </ScrollView>
        <View style={styles.tabItemContainer}>
          {currentTab === TABS[0].key ? (
            <EmiScheduleTab loanAccountNumber={loanAccountNumber} tabId={scheduleTabId} />
          ) : (
            <RepaymentsTab loanAccountNumber={loanAccountNumber} />
          )}
        </View>
      </SafeAreaView>
    </Layout>
  );
};

const styles = StyleSheet.create({
  firstContainer: {
    backgroundColor: COLORS.TEXT.GREY_2,
    paddingBottom: 0,
  },
  line1: {
    marginLeft: 13.5,
    marginRight: 24.5,
  },
  line2: {
    marginLeft: 15.5,
    marginRight: 31.5,
  },
  lineStyle: {
    width: 1,
    height: 24,
    backgroundColor: COLORS.BORDER.PRIMARY,
  },
  tabContainer: {
    paddingTop: 31,
    backgroundColor: 'white',
  },
  tabItemContainer: {
    padding: 16,
    paddingTop: 24,
    height: '82%',
    marginBottom: 10,
    paddingBottom: 100,
    backgroundColor: 'white',
  },
  pt31: {
    paddingTop: 31,
  },
});

export default EmiSchedule;