gistfile1.txt

import React from 'react';

import {Box} from '@components/atoms';
import {Divider} from '@components/molecules';
import {getServiceStatus} from '@features/journey/utils';
import {useSteps, useTranslations} from '@hooks';
import {OptionItem} from '@types';

import {JourneyBlock, Service} from '../organisms';

type Props = {
  data?: OptionItem[];
  journeyNumber?: number;
  onServiceInfoErrorPress: (errorMessage: string) => void;
};

export const ServicesBlock = ({
  data,
  journeyNumber,
  onServiceInfoErrorPress,
}: Props) => {
  const {translate} = useTranslations();

  const {steps} = useSteps();

  const stagesLength = steps?.data?.sfServiceCollection?.items?.length;
  const hasInstances = data?.some(
    serviceRequest =>
      serviceRequest?.serviceRequestsCollection?.items[0]?.instances?.length ||
      serviceRequest.serviceRequestsCollection.items[0]?.legacySr,
  );

  const isLastStageHasActivatedServiceRequest =
    hasInstances && journeyNumber === stagesLength;

  const isActivatedDataExists = !!data?.some(
    serviceRequest => getServiceStatus(serviceRequest).inProgress,
  );

  if (!data || !stagesLength || isLastStageHasActivatedServiceRequest) {
    return;
  }

  return (
    <JourneyBlock
      title={translate('portal_teyaseer_services')}
      description={translate('portal_select_services_from_list')}>
      <Box borderRadius={8} bg="white">
        {data.map((serviceItem, index) => {
          if (serviceItem.serviceRequestsCollection.items[0].legacySr) {
            return null;
          }
          return (
            <Box key={serviceItem.title + serviceItem.description}>
              <Service
                data={serviceItem}
                numberOfService={index + 1}
                onServiceInfoErrorPress={onServiceInfoErrorPress}
                isActivatedDataExists={isActivatedDataExists}
              />
              {data.length !== index + 1 && <Divider marginVertical="xxs" />}
            </Box>
          );
        })}
      </Box>
    </JourneyBlock>
  );
};