hunk.code_window:         environmentId: command.environmentId,
         })
       );
       return novuIntegrations.length > 0 ? novuIntegrations : integrations;
     }
   }
hunk.labels: keep keep keep keep replace keep keep
hunk.after_edit:     return novuIntegration ? [novuIntegration] : integrations;
  
hunk.file_path: apps/api/src/app/integrations/usecases/get-decrypted-integrations/get-decrypted-integrations.usecase.ts
hunk.type: replace
file: import { Container, Grid } from '@mantine/core';
  import { format, parseISO } from 'date-fns';
  import styled from '@emotion/styled';
  import { StepTypeEnum, DelayTypeEnum, JobStatusEnum } from '@novu/shared';
  
  import { ExecutionDetailsWebhookFeedback } from './ExecutionDetailsWebhookFeedback';
  import { getLogoByType } from './helpers';
  import { colors, Text } from '../../design-system';
  import { CheckCircle, ErrorIcon } from '../../design-system/icons';
  
  const StepName = styled(Text)`
    color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B40)};
    font-size: 16px;
    font-weight: 700;
    line-height: 17px;
    padding-bottom: 5px;
    padding-top: 0;
    text-transform: capitalize;
  `;
  
  const StepDetails = styled(Text)`
    color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B60)};
    font-size: 12px;
    line-height: 16px;
    padding: 0;
  `;
  
  const StepDate = styled(Text)`
    color: ${colors.B60};
    font-size: 12px;
    line-height: 16px;
    padding: 3px 0 0;
  `;
  
  const FailedStepDetails = styled(StepDetails)`
    color: ${colors.error};
  `;
  
  const SuccessStepDetails = styled(StepDetails)`
    color: ${colors.success};
  `;
  
  const LogoWrapper = styled(Container)`
    max-width: 50px;
    padding: 10px 10px 0 0;
    position: relative;
  `;
  
  const getLogoStyledComponentByStepStatus = (status, type) => {
    if (status === JobStatusEnum.COMPLETED) {
      return CheckCircle;
    }
  
    return getLogoByType(type);
  };
  
  const getColorByStatus = (status) => {
    if (status === JobStatusEnum.COMPLETED) {
      return colors.success;
    }
  
    return undefined;
  };
  
  const StepLogo = ({ status, type }) => {
    const Logo = getLogoStyledComponentByStepStatus(status, type);
    const color = getColorByStatus(status);
  
    return (
      <LogoWrapper>
        {Logo && <Logo height="32px" width="32px" color={color} />}
        {status === JobStatusEnum.FAILED && (
          <ErrorIcon
            height="15px"
            width="15px"
            color={colors.error}
            style={{ position: 'relative', left: '20px', top: '-15px' }}
          />
        )}
      </LogoWrapper>
    );
  };
  
  const generateDetailByStepAndStatus = (status, step) => {
    if (status === JobStatusEnum.COMPLETED) {
      return `Success! ${step.executionDetails?.at(-1)?.detail}`;
    }
  
    if (step.type === StepTypeEnum.DIGEST) {
      const { digest } = step;
  
      return `Digesting events for ${digest.amount} ${digest.unit}`;
    }
  
    if (step.type === StepTypeEnum.DELAY) {
      const { digest, step: stepMetadata, payload } = step;
      if (stepMetadata.metadata.type === DelayTypeEnum.SCHEDULED) {
        return `Delaying execution until ${payload[stepMetadata.metadata.delayPath]}`;
      }
  
      return `Delaying execution for ${digest.amount} ${digest.unit}`;
    }
  
    return step.executionDetails?.at(-1)?.detail;
  };
  
  const getDetailsStyledComponentByStepStatus = (status) => {
    if (status === JobStatusEnum.COMPLETED) {
      return SuccessStepDetails;
    }
  
    if (status === JobStatusEnum.FAILED) {
      return FailedStepDetails;
    }
  
    return StepDetails;
  };
  
  const StepOutcome = ({ createdAt, name, detail, status }) => {
    const Details = getDetailsStyledComponentByStepStatus(status);
    const date = format(parseISO(createdAt), 'dd/MM/yyyy');
  
    return (
      <>
        <StepName>{name?.replace('_', ' ')}</StepName>
        <Details>{detail}</Details>
        <StepDate>{date}</StepDate>
      </>
    );
  };
  
  export const ExecutionDetailsStepHeader = ({ step }) => {
    const { status } = step;
    const generatedDetail = generateDetailByStepAndStatus(status, step);
  
    return (
      <Grid>
        <Grid.Col span={1}>
          <StepLogo status={status} type={step.type} />
        </Grid.Col>
        <Grid.Col span={7}>
          <StepOutcome createdAt={step?.createdAt} name={step?.type} detail={generatedDetail} status={status} />
        </Grid.Col>
        <Grid.Col span={4}>
          <ExecutionDetailsWebhookFeedback executionDetails={step.executionDetails} />
        </Grid.Col>
      </Grid>
    );
  };
  