hunk.code_window:   tenant?: ITenantDefine;
     actor?: SubscriberEntity;
     subscriber: ISubscribersDefine;
     templateId: string;
     _subscriberSource: SubscriberSourceEnum;
     requestCategory: TriggerRequestCategoryEnum;
   }
   export interface IProcessSubscriberJobDto extends IJobParams {
  
hunk.labels: keep keep keep keep keep replace keep keep keep
hunk.after_edit:   requestCategory?: TriggerRequestCategoryEnum;
  
hunk.file_path: packages/application-generic/src/dtos/process-subscriber-job.dto.ts
hunk.type: replace
file: import styled from '@emotion/styled';
  import React, { useEffect } from 'react';
  import { ReactFlowProvider } from 'react-flow-renderer';
  
  import { GetStartedLayout } from '../components/layout/GetStartedLayout';
  
  import { useCreateDigestDemoWorkflow } from '../../../api/hooks/notification-templates/useCreateDigestDemoWorkflow';
  import { DigestDemoFlow } from '../../../components';
  import { useSegment } from '../../../components/providers/SegmentProvider';
  import { ROUTES } from '../../../constants/routes.enum';
  import { Button, ArrowLeft, ArrowLeftGradient, Label } from '@novu/design-system';
  import { NavButton } from '../components/NavButton';
  import useStyles from '../components/OnboardingSteps.styles';
  import { getStartedSteps, OnBoardingAnalyticsEnum } from '../consts';
  
  export function DigestPreview() {
    const segment = useSegment();
  
    useEffect(() => {
      segment.track(OnBoardingAnalyticsEnum.BUILD_WORKFLOW_VISIT);
    }, [segment]);
  
    return (
      <GetStartedLayout
        footer={{
          leftSide: <FooterLeftSide />,
          rightSide: <FooterRightSide />,
        }}
      >
        <DemoContainer>
          <ReactFlowProvider>
            <DigestDemoFlowStyled />
          </ReactFlowProvider>
        </DemoContainer>
      </GetStartedLayout>
    );
  }
  function FooterLeftSide() {
    const { theme } = useStyles();
    const segment = useSegment();
    const gradientColor = theme.colorScheme === 'dark' ? 'none' : 'red';
  
    function handleOnClick() {
      segment.track(OnBoardingAnalyticsEnum.BUILD_WORKFLOW_PREVIOUS_PAGE_CLICK);
    }
  
    return (
      <NavButton navigateTo={getStartedSteps.first} handleOnClick={handleOnClick}>
        <ThemeArrowLeft style={{ marginRight: '10px' }} />
        <Label gradientColor={gradientColor}>Previous</Label>
      </NavButton>
    );
  }
  
  function FooterRightSide() {
    const segment = useSegment();
    const { createDigestDemoWorkflow, isLoading: isCreating } = useCreateDigestDemoWorkflow();
  
    function handlerBuildWorkflowClick() {
      segment.track(OnBoardingAnalyticsEnum.BUILD_WORKFLOW_CLICK);
    }
  
    function handlerTryDigestClick() {
      segment.track(OnBoardingAnalyticsEnum.BUILD_WORKFLOW_TRY_DIGEST_PLAYGROUND_CLICK);
      createDigestDemoWorkflow();
    }
  
    return (
      <ButtonsHolder>
        <NavButton navigateTo={ROUTES.WORKFLOWS_CREATE} handleOnClick={handlerBuildWorkflowClick}>
          <ButtonText>Build a Workflow</ButtonText>
        </NavButton>
        <StyledButton
          fullWidth
          pulse
          onClick={handlerTryDigestClick}
          loading={isCreating}
          data-test-id="try-digest-playground-btn"
        >
          <ButtonText>Try the Digest Playground</ButtonText>
        </StyledButton>
      </ButtonsHolder>
    );
  }
  
  const StyledButton = styled(Button)`
    height: 50px;
  `;
  
  const DigestDemoFlowStyled = styled(DigestDemoFlow)`
    height: 400px;
  `;
  
  const ButtonsHolder = styled.div`
    display: flex;
    gap: 20px;
  `;
  
  const DemoContainer = styled.div`
    width: 400px;
  
    @media screen and (min-width: 1367px) {
      width: 450px;
    }
  
    @media screen and (min-width: 1921px) {
      width: 600px;
    }
  `;
  
  const ButtonText = styled.div`
    font-size: 16px;
  `;
  
  function ThemeArrowLeft(props: React.ComponentPropsWithoutRef<'svg'>) {
    const { theme } = useStyles();
  
    return <>{theme.colorScheme === 'dark' ? <ArrowLeft {...props} /> : <ArrowLeftGradient {...props} />}</>;
  }
  