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;
  enabled: boolean;
};

export const PhaseCard = ({phase, currentIndex, enabled}: TopicCardProps) => {
  const {isEnabled, toggle} = useSwitch(enabled);
  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,
  },
});

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);
  const {enable} = useSwitch(false);

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

  useEffect(() => {
    if (currentStage?.stageOrder) {
      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>
  );
};