ProgressHeader.tsx

/* eslint-disable react-hooks/exhaustive-deps */
import React, {useEffect} from 'react';

import {Box, Text} from '@components/atoms';
import {Divider} from '@components/molecules';
import {useOnboarding} from '@features/home/hooks';
import {
  useDataRefetch,
  useDateFormatter,
  useSteps,
  useTranslations,
} from '@hooks';
import {useAppSelector, useGetProjectSummaryQuery} from '@store';

import {ProgressChart, CurrentStages} from '../molecules';

export const ProgressHeader = ({
  refreshing,
  userName,
}: {
  refreshing?: boolean;
  userName?: string;
}) => {
  const {translate} = useTranslations();

  const {formatDateToDoString} = useDateFormatter();
  const {steps, updateSteps, isUninitialized} = useSteps();
  const {shouldRefresh} = useAppSelector(state => state.refreshSlice.home);
  const items = steps?.data?.sfServiceCollection?.items;
  const currentStage = items?.find(item => item.isCurrentStage);
  const {data} = useGetProjectSummaryQuery();
  const {isCompleted} = useOnboarding();
  useDataRefetch();

  useEffect(() => {
    if ((refreshing || shouldRefresh) && !isUninitialized) {
      updateSteps();
    }
  }, [refreshing, shouldRefresh, isUninitialized]);

  if (!isCompleted) {
    return null;
  }
  return (
    <>
      <Box marginHorizontal="xxxxl" marginBottom="xxxxl">
        <Box
          flexDirection="row"
          flex={1}
          justifyContent="space-between"
          alignItems="center"
          marginTop="s">
          <Text variant="bold">{translate('journey_progress_bar')}</Text>
          <ProgressChart refreshing={refreshing} />
        </Box>
        <Box
          flexDirection="row"
          justifyContent="space-between"
          marginTop="xxxl">
          <Text fontSize={12}>{translate('portal_estimated_completion')}</Text>
          <Text fontSize={12} variant="bold">
            {data?.data?.dateOfCompletion
              ? formatDateToDoString(new Date(data?.data?.dateOfCompletion))
              : '-'}
          </Text>
        </Box>
      </Box>
      {userName && (
        <Text variant="body" mb="xxxl" paddingHorizontal="xxxl">
          {translate('portal_welcome_back').replace('{{userName}}', userName)}
        </Text>
      )}
      <Divider />
      <CurrentStages
        stageTitle={currentStage?.name}
        isRefreshing={refreshing}
      />
      <Divider />
    </>
  );
};