hunk.code_window: import { Injectable } from '@nestjs/common';
   import { MessageTemplateEntity, MessageTemplateRepository } from '@novu/dal';
   import { ChangeEntityTypeEnum } from '@novu/shared';
   import { CreateMessageTemplateCommand } from './create-message-template.command';
   import { sanitizeMessageContent } from '../../shared/sanitizer.service';
   import { CreateChange, CreateChangeCommand } from '../../../change/usecases';
  
hunk.labels: keep keep replace keep keep keep keep
hunk.after_edit: import { ChangeEntityTypeEnum, TemplateVariableTypeEnum } from '@novu/shared';
  
hunk.file_path: apps/api/src/app/message-template/usecases/create-message-template/create-message-template.usecase.ts
hunk.type: replace
file: import { useEffect, useState } from 'react';
  import * as WebFont from 'webfontloader';
  import { css, Global } from '@emotion/react';
  import { NotificationCenter, NovuProvider, ITranslationEntry, ITab, IStore } from '@novu/notification-center';
  import type { INovuThemeProvider, INotificationCenterStyles } from '@novu/notification-center';
  import { IMessage, IOrganizationEntity, ButtonTypeEnum } from '@novu/shared';
  
  import { API_URL, WS_URL } from '../../config';
  
  interface INotificationCenterWidgetProps {
    onUrlChange: (url: string) => void;
    onNotificationClick: (notification: IMessage) => void;
    onUnseenCountChanged: (unseenCount: number) => void;
    onActionClick: (templateIdentifier: string, type: ButtonTypeEnum, message: IMessage) => void;
    applicationIdentifier: string | undefined;
  }
  
  export function NotificationCenterWidget(props: INotificationCenterWidgetProps) {
    const [userDataPayload, setUserDataPayload] = useState<{ subscriberId: string; subscriberHash: string }>();
    const [backendUrl, setBackendUrl] = useState(API_URL);
    const [socketUrl, setSocketUrl] = useState(WS_URL);
    const [theme, setTheme] = useState<INovuThemeProvider>({});
    const [fontFamily, setFontFamily] = useState<string>('Lato');
    const [frameInitialized, setFrameInitialized] = useState(false);
    const [i18n, setI18n] = useState<ITranslationEntry>();
    const [tabs, setTabs] = useState<ITab[]>();
    const [stores, setStores] = useState<IStore[]>();
    const [styles, setStyles] = useState<INotificationCenterStyles>();
  
    useEffect(() => {
      WebFont.load({
        google: {
          families: [fontFamily],
        },
      });
    }, [fontFamily]);
  
    useEffect(() => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const handler = ({ data }: any) => {
        if (data && data.type === 'INIT_IFRAME') {
          setUserDataPayload(data.value.data);
  
          if (data.value.backendUrl) {
            setBackendUrl(data.value.backendUrl);
          }
  
          if (data.value.socketUrl) {
            setSocketUrl(data.value.socketUrl);
          }
  
          if (data.value.theme) {
            setTheme(data.value.theme);
          }
  
          if (data.value.i18n) {
            setI18n(data.value.i18n);
          }
  
          if (data.value.tabs) {
            setTabs(data.value.tabs);
          }
  
          if (data.value.stores) {
            setStores(data.value.stores);
          }
  
          if (data.value.styles) {
            setStyles(data.value.styles);
          }
  
          setFrameInitialized(true);
        }
      };
  
      if (process.env.NODE_ENV === 'test') {
        // eslint-disable-next-line
        (window as any).initHandler = handler;
      }
  
      window.addEventListener('message', handler);
  
      window.parent.postMessage({ type: 'WIDGET_READY' }, '*');
  
      return () => window.removeEventListener('message', handler);
    }, []);
  
    function onLoad({ organization }: { organization: IOrganizationEntity }) {
      setFontFamily(organization?.branding?.fontFamily || 'Lato');
    }
  
    if (!userDataPayload) return null;
  
    return (
      <>
        <Global styles={globalStyle(fontFamily)} />
        {frameInitialized && (
          <NovuProvider
            backendUrl={backendUrl}
            socketUrl={socketUrl}
            applicationIdentifier={props.applicationIdentifier as string}
            subscriberId={userDataPayload.subscriberId}
            onLoad={onLoad}
            subscriberHash={userDataPayload.subscriberHash}
            i18n={i18n}
            stores={stores}
            styles={styles}
          >
            <NotificationCenter
              colorScheme="light"
              onNotificationClick={props.onNotificationClick}
              onUrlChange={props.onUrlChange}
              onUnseenCountChanged={props.onUnseenCountChanged}
              onActionClick={props.onActionClick}
              theme={theme}
              tabs={tabs}
            />
          </NovuProvider>
        )}
      </>
    );
  }
  
  const globalStyle = (fontFamily: string) => css`
    body {
      margin: 0;
      font-family: ${fontFamily}, Helvetica, sans-serif;
      color: #333737;
    }
  `;
  