hunk.code_window:   @IsEnum(TriggerRequestCategoryEnum)
     requestCategory: TriggerRequestCategoryEnum;
   }
hunk.labels: keep replace keep
hunk.after_edit:   requestCategory?: TriggerRequestCategoryEnum;
  
hunk.file_path: packages/application-generic/src/usecases/subscriber-job-bound/subscriber-job-bound.command.ts
hunk.type: replace
file: import { Center, createStyles, Group, Loader } from '@mantine/core';
  import { format } from 'date-fns';
  import { colors } from '@novu/design-system';
  import { PreviewDateIcon } from './PreviewDateIcon';
  import { PreviewUserIcon } from './PreviewUserIcon';
  import Frame from 'react-frame-component';
  import { ErrorBoundary } from 'react-error-boundary';
  import { When } from '../../../components/utils/When';
  import { EmailIntegrationInfo } from './EmailIntegrationInfo';
  
  const useStyles = createStyles((theme) => ({
    browser: {
      background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
      borderRadius: '7px',
    },
    bar: {
      borderRadius: '7px 7px 0 0',
      background: theme.colorScheme === 'dark' ? colors.B20 : colors.B85,
      width: '100%',
      height: '45px',
      maxHeight: '45px',
    },
    barAction: {
      height: '10px',
      width: '10px',
      borderRadius: '10px',
      background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
    },
    header: {
      width: '100%',
      paddingLeft: 10,
      paddingRight: 10,
      marginTop: '40px',
    },
    subject: {
      marginBottom: '3px',
      fontWeight: 'bolder',
    },
    from: {
      color: theme.colorScheme === 'dark' ? colors.B60 : colors.B40,
      fontWeight: 'normal',
    },
    date: {
      height: '20px',
      marginTop: '20px',
      color: theme.colorScheme === 'dark' ? colors.B60 : colors.B40,
      fontWeight: 'normal',
    },
    content: {
      borderRadius: '7px 7px 0 0',
      marginLeft: 10,
      marginRight: 10,
      height: '50vh',
      background: theme.colorScheme === 'dark' ? colors.B15 : colors.white,
      marginTop: '20px',
    },
    frame: {
      border: '0px',
      width: '100%',
      height: '100%',
    },
    fallbackFrame: {
      border: '0px',
      width: '100%',
      height: '100%',
      padding: '15px',
      textAlign: 'center',
    },
  }));
  
  export const PreviewWeb = ({
    integration,
    subject,
    content,
    loading = false,
  }: {
    integration: any;
    subject?: string;
    content: string;
    loading?: boolean;
  }) => {
    const { classes } = useStyles();
  
    return (
      <>
        <div className={classes.browser}>
          <div className={classes.bar}>
            <Group
              sx={{
                marginLeft: '20px',
                height: '45px',
              }}
              spacing={7}
            >
              <div className={classes.barAction}></div>
              <div className={classes.barAction}></div>
              <div className={classes.barAction}></div>
            </Group>
          </div>
          <div className={classes.header}>
            <Group
              sx={{
                height: '40px',
              }}
              position="apart"
            >
              <div>
                <Group
                  sx={{
                    height: '40px',
                  }}
                >
                  <PreviewUserIcon />
                  <div>
                    <div data-test-id="preview-subject" className={classes.subject}>
                      {subject}
                    </div>
                    <div data-test-id="preview-from" className={classes.from}>
                      <EmailIntegrationInfo integration={integration} field={'from'} />
                    </div>
                  </div>
                </Group>
              </div>
              <div>
                <div className={classes.date}>
                  <PreviewDateIcon />
                  <span
                    data-test-id="preview-date"
                    style={{
                      marginLeft: '15px',
                    }}
                  >
                    {format(new Date(), 'EEE, MMM d, HH:mm')}
                  </span>
                </div>
              </div>
            </Group>
            <When truthy={loading}>
              <div>
                <Center>
                  <Loader color={colors.B70} mb={20} mt={20} size={32} />
                </Center>
              </div>
            </When>
          </div>
          <When truthy={!loading}>
            <div className={classes.content}>
              <ErrorBoundary
                FallbackComponent={() => (
                  <div data-test-id="preview-content" className={classes.fallbackFrame}>
                    Oops! We've recognized some glitch in this HTML. Please give it another look!
                  </div>
                )}
                resetKeys={[content]}
              >
                <Frame className={classes.frame} data-test-id="preview-content" initialContent={content}>
                  <></>
                </Frame>
              </ErrorBoundary>
            </div>
          </When>
        </div>
      </>
    );
  };
  