PhaseCard.tsx

import React from 'react';
import {StyleSheet} from 'react-native';

import {Box, Text, TouchableOpacity} from '@components/atoms';
import {CollapsibleBox, RotaryIcon, ShadowBox} from '@components/molecules';
import {useSwitch} from '@hooks';
import {useTheme} from '@theme';
import {DashboardServiceItem} from '@types';

import ChevronUp from '@svg/chevron-up.svg';

import {PhaseImage} from '../molecules';

type TopicCardProps = {
  phase: DashboardServiceItem;
  currentIndex: number | undefined;
};

export const PhaseCard = ({phase, currentIndex}: TopicCardProps) => {
  const {isEnabled, toggle} = useSwitch();
  const theme = useTheme();

  return (
    <ShadowBox>
      <TouchableOpacity variant="rowSpaceBetween" pr="l" onPress={toggle}>
        <PhaseImage
          imageUrl={phase.infoThumbnail.url}
          iconName={phase.icon}
          currentIndex={currentIndex}
        />
        <Text
          variant="subHeader"
          fontSize={16}
          fontWeight="500"
          color="teyaseerBlack"
          ml="s"
          style={styles.title}>
          {phase.title}
        </Text>
        <Box flex={0.2} alignItems="flex-end">
          <RotaryIcon rotated={isEnabled}>
            <ChevronUp fill={theme.colors.blackPrimary} />
          </RotaryIcon>
        </Box>
      </TouchableOpacity>
      <CollapsibleBox expanded={isEnabled} p="l">
        <Text fontSize={12} lineHeight={18}>
          {phase.infoDescription}
        </Text>
      </CollapsibleBox>
    </ShadowBox>
  );
};

const styles = StyleSheet.create({
  title: {
    flex: 0.8,
  },
});

PhaseImage.tsx

import React, {ReactElement, memo} from 'react';
import {SvgUri} from 'react-native-svg';

import {Box, Image} from '@components/atoms';
import {useUrlIsSvg} from '@hooks';
import {useTheme} from '@theme';

import CaseIcon from '@svg/case.svg';
import ConstructionIcon from '@svg/construction.svg';
import ContractorIcon from '@svg/contractor.svg';
import DesignIcon from '@svg/design.svg';
import FinanceIcon from '@svg/finance.svg';
import KeyIcon from '@svg/key.svg';

type TopicCardProps = {
  imageUrl: string;
  iconName: string;
  currentIndex: number | undefined;
};

const iconMapper = (
  name: string,
  currentIndex: number | undefined,
  colors: any,
): ReactElement => {
  console.log('name', name, currentIndex);
  switch (name) {
    case 'copySuccess':
      return (
        <FinanceIcon
          width={32}
          height={32}
          fill={currentIndex === 1 ? colors.green : 'none'}
        />
      );
    case 'officeBag':
      return (
        <CaseIcon
          width={32}
          height={32}
          fill={currentIndex === 2 ? colors.green : 'none'}
        />
      );
    case 'colorSwatch':
      return (
        <DesignIcon
          width={32}
          height={32}
          fill={currentIndex === 3 ? colors.green : 'none'}
        />
      );
    case 'userHelmet':
      return (
        <ContractorIcon
          width={32}
          height={32}
          fill={currentIndex === 4 ? colors.green : 'none'}
        />
      );
    case 'trowelBricks':
      return (
        <ConstructionIcon
          width={32}
          height={32}
          fill={currentIndex === 5 ? colors.green : 'none'}
        />
      );
    default:
      return (
        <KeyIcon
          width={32}
          height={32}
          fill={currentIndex === 6 ? colors.green : 'none'}
        />
      );
  }
};

export const PhaseImage = memo(
  ({imageUrl, iconName, currentIndex}: TopicCardProps) => {
    const {colors} = useTheme();
    const {isChecking, isSvg} = useUrlIsSvg(imageUrl ?? '');

    return (
      <Box>
        {!isChecking && isSvg ? (
          <SvgUri
            width={130}
            height={130}
            preserveAspectRatio="xMinYMin slice"
            uri={imageUrl}
          />
        ) : (
          <Image height={130} width={130} source={{uri: imageUrl}} />
        )}
        <Box variant="center" position="absolute" top={10} left={10}>
          {iconMapper(iconName, currentIndex, colors)}
        </Box>
      </Box>
    );
  },
);

PhaseSection.tsx

import React, {useCallback, useEffect} from 'react';

import {Box, Text} from '@components/atoms';
import {useServices} from '@features/home/hooks';
import {useTranslations, useSwitch, useSteps} from '@hooks';
import {DashboardServiceItem} from '@types';

import {PhaseCard, PhasesLoader} from '../organisms';

export const PhasesSection = ({refreshing}: {refreshing: boolean}) => {
  const {translate} = useTranslations();

  const {steps, stepsLoading} = useSteps();
  const {filteredServices, servicesIsLoading} = useServices({refreshing});
  const items = steps?.data?.sfServiceCollection?.items;
  const currentStage = items?.find(item => item.isCurrentStage);

  console.log('currentStage', currentStage);
  const {enable} = useSwitch(false);

  const renderItem = useCallback(
    (item: DashboardServiceItem) => (
      <PhaseCard
        key={item.title}
        phase={item}
        currentIndex={currentStage?.stageOrder}
      />
    ),
    [currentStage],
  );

  useEffect(() => {
    if (currentStage?.stageOrder === 1) {
      enable();
    }
  }, [enable, currentStage]);

  if (stepsLoading || servicesIsLoading) {
    return <PhasesLoader />;
  }

  return (
    <Box flexGrow={1} paddingHorizontal="xxxxl" gap="xxxxl" paddingTop="large">
      <Box variant="rowSpaceBetween">
        <Text variant="bold">{translate('portal_all_phases')}</Text>
      </Box>
      <Text>{translate('portal_service_info_title')}</Text>
      <Box flex={1}>{filteredServices?.map(renderItem)}</Box>
    </Box>
  );
};

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 {useGetProjectSummaryQuery} from '@store';

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

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

  const {formatDateToDoString} = useDateFormatter();
  const {steps, updateSteps, stepsFetching} = useSteps();
  const items = steps?.data?.sfServiceCollection?.items;
  const currentStage = items?.find(item => item.isCurrentStage);
  const {data} = useGetProjectSummaryQuery();
  const {isCompleted} = useOnboarding();
  useDataRefetch();

  useEffect(() => {
    if (refreshing) {
      updateSteps();
    }
  }, [refreshing]);

  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 />
      <CurrentStepIcons
        currentStageIndex={currentStage?.stageOrder}
        stepsFetching={stepsFetching}
      />
      <CurrentStages
        stageTitle={currentStage?.name}
        isRefreshing={refreshing}
      />
      <Divider />
    </>
  );
};