feat: move in app preview render to backend

apps/api/src/app/content-templates/content-templates.controller.ts

@@ -1,15 +1,24 @@
 import { Body, Controller, Post, UseGuards } from '@nestjs/common';
 import { ApiExcludeController } from '@nestjs/swagger';
-import { IEmailBlock, IJwtPayload, MessageTemplateContentType } from '@novu/shared';
-import { CompileEmailTemplate, CompileEmailTemplateCommand, JwtAuthGuard } from '@novu/application-generic';
+import { IEmailBlock, IJwtPayload, IMessageCTA, MessageTemplateContentType } from '@novu/shared';
+import {
+  CompileEmailTemplate,
+  CompileEmailTemplateCommand,
+  CompileInAppTemplate,
+  CompileInAppTemplateCommand,
+  JwtAuthGuard,
+} from '@novu/application-generic';
 
 import { UserSession } from '../shared/framework/user.decorator';
 
 @Controller('/content-templates')
 @UseGuards(JwtAuthGuard)
 @ApiExcludeController()
 export class ContentTemplatesController {
-  constructor(private compileEmailTemplateUsecase: CompileEmailTemplate) {}
+  constructor(
+    private compileEmailTemplateUsecase: CompileEmailTemplate,
+    private compileInAppTemplate: CompileInAppTemplate
+  ) {}
 
   @Post('/preview/email')
   public previewEmail(
@@ -33,4 +42,23 @@ export class ContentTemplatesController {
       })
     );
   }
+
+  @Post('/preview/in-app')
+  public previewInApp(
+    @UserSession() user: IJwtPayload,
+    @Body('content') content: string,
+    @Body('payload') payload: any,
+    @Body('cta') cta: IMessageCTA
+  ) {
+    return this.compileInAppTemplate.execute(
+      CompileInAppTemplateCommand.create({
+        userId: user._id,
+        organizationId: user.organizationId,
+        environmentId: user.environmentId,
+        content,
+        payload,
+        cta,
+      })
+    );
+  }
 }

apps/api/src/app/content-templates/usecases/index.ts

@@ -1,3 +1,3 @@
-import { CompileTemplate, CompileEmailTemplate } from '@novu/application-generic';
+import { CompileTemplate, CompileEmailTemplate, CompileInAppTemplate } from '@novu/application-generic';
 
-export const USE_CASES = [CompileTemplate, CompileEmailTemplate];
+export const USE_CASES = [CompileTemplate, CompileEmailTemplate, CompileInAppTemplate];

apps/web/src/api/content-templates.ts

@@ -16,3 +16,7 @@ export async function previewEmail({
 }) {
   return api.post('/v1/content-templates/preview/email', { content, contentType, payload, subject, layoutId });
 }
+
+export async function previewInApp({ content, cta, payload }: { content?: string; cta: any; payload: string }) {
+  return api.post('/v1/content-templates/preview/in-app', { content, payload, cta });
+}

apps/web/src/pages/templates/components/in-app-editor/InAppEditorBlock.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
-import { Control, Controller, useFormContext, useWatch } from 'react-hook-form';
-import Handlebars from 'handlebars/dist/handlebars';
-import { IMessageAction } from '@novu/shared';
-
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { IMessageAction, MessageActionStatusEnum } from '@novu/shared';
 import { InAppWidgetPreview } from './preview/InAppWidgetPreview';
 import type { IForm } from '../formTypes';
 import { EmailCustomCodeEditor } from '../email-editor/EmailCustomCodeEditor';
-import { When } from '../../../../components/utils/When';
 import { useStepFormPath } from '../../hooks/useStepFormPath';
+import { colors, errorMessage } from '@novu/design-system';
+import { useMutation } from '@tanstack/react-query';
+import { previewInApp } from '../../../../api/content-templates';
+import { Center, Loader } from '@mantine/core';
 
 export function InAppEditorBlock({
   readonly,
@@ -25,6 +26,10 @@ export function InAppEditorBlock({
     control,
   });
 
+  if (preview) {
+    return <ContentRender readonly={readonly} payload={payload} />;
+  }
+
   return (
     <Controller
       name={`${path}.template.cta.action`}
@@ -35,39 +40,85 @@ export function InAppEditorBlock({
         const { ref, ...fieldRefs } = field;
 
         return (
-          <InAppWidgetPreview {...fieldRefs} preview={preview} readonly={readonly} enableAvatar={!!enableAvatar}>
-            <>
-              <When truthy={!preview}>
-                <ContentContainerController />
-              </When>
-              <When truthy={preview}>
-                <ContentRender payload={payload} />
-              </When>
-            </>
+          <InAppWidgetPreview {...fieldRefs} readonly={readonly} enableAvatar={!!enableAvatar}>
+            <ContentContainerController />
           </InAppWidgetPreview>
         );
       }}
     />
   );
 }
 
-const ContentRender = ({ payload }: { payload: string }) => {
+const ContentRender = ({ payload, readonly }: { payload: string; readonly: boolean }) => {
   const { control } = useFormContext<IForm>();
   const path = useStepFormPath();
   const content = useWatch({
     name: `${path}.template.content`,
     control,
   });
+  const cta = useWatch({
+    name: `${path}.template.cta`,
+    control,
+  });
+  const enableAvatar = useWatch({
+    name: `${path}.template.enableAvatar` as any,
+    control,
+  });
+
+  const [buttons, setButtons] = useState<any[]>([]);
+  const { isLoading, mutateAsync } = useMutation(previewInApp);
   const [compiledContent, setCompiledContent] = useState('');
 
+  const parseContent = (args: { content?: string | any; payload: any; cta: any }) => {
+    mutateAsync({
+      ...args,
+      payload: JSON.parse(args.payload),
+    })
+      .then((result: { content: string; ctaButtons: any[] }) => {
+        setCompiledContent(result.content);
+        setButtons(result.ctaButtons);
+
+        return result;
+      })
+      .catch((e: any) => {
+        errorMessage(e?.message || 'Un-expected error occurred');
+      });
+  };
+
   useEffect(() => {
-    try {
-      const template = Handlebars.compile(content);
-      setCompiledContent(template(JSON.parse(payload)));
-    } catch (e) {}
-  }, [content, payload]);
+    parseContent({
+      content,
+      payload,
+      cta,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [compiledContent, payload, cta]);
+
+  if (isLoading) {
+    return (
+      <div>
+        <Center>
+          <Loader color={colors.B70} mb={20} mt={20} size={32} />
+        </Center>
+      </div>
+    );
+  }
 
-  return <span data-test-id="in-app-content-preview" dangerouslySetInnerHTML={{ __html: compiledContent }} />;
+  return (
+    <InAppWidgetPreview
+      preview={true}
+      readonly={readonly}
+      enableAvatar={!!enableAvatar}
+      value={{
+        status: MessageActionStatusEnum.PENDING,
+        buttons: buttons,
+        result: {},
+      }}
+      onChange={() => {}}
+    >
+      <span data-test-id="in-app-content-preview" dangerouslySetInnerHTML={{ __html: compiledContent }} />
+    </InAppWidgetPreview>
+  );
 };
 
 function ContentContainerController() {

apps/worker/src/app/workflow/usecases/send-message/send-message-in-app.usecase.ts

@@ -8,14 +8,11 @@ import {
   SubscriberRepository,
   MessageEntity,
   OrganizationRepository,
-  OrganizationEntity,
 } from '@novu/dal';
 import {
   ChannelTypeEnum,
-  IMessageButton,
   ExecutionDetailsSourceEnum,
   ExecutionDetailsStatusEnum,
-  IEmailBlock,
   ActorTypeEnum,
   WebSocketEventEnum,
 } from '@novu/shared';
@@ -25,14 +22,14 @@ import {
   DetailEnum,
   CreateExecutionDetailsCommand,
   SelectIntegration,
-  CompileTemplate,
-  CompileTemplateCommand,
   WebSocketsQueueService,
   buildFeedKey,
   buildMessageCountKey,
   GetNovuProviderCredentials,
   SelectVariant,
   ExecutionLogQueueService,
+  CompileInAppTemplate,
+  CompileInAppTemplateCommand,
 } from '@novu/application-generic';
 
 import { CreateLog } from '../../../shared/logs';
@@ -51,12 +48,12 @@ export class SendMessageInApp extends SendMessageBase {
     protected createLogUsecase: CreateLog,
     protected executionLogQueueService: ExecutionLogQueueService,
     protected subscriberRepository: SubscriberRepository,
-    private compileTemplate: CompileTemplate,
     private organizationRepository: OrganizationRepository,
     protected selectIntegration: SelectIntegration,
     protected getNovuProviderCredentials: GetNovuProviderCredentials,
     protected selectVariant: SelectVariant,
-    protected moduleRef: ModuleRef
+    protected moduleRef: ModuleRef,
+    protected compileInAppTemplate: CompileInAppTemplate
   ) {
     super(
       messageRepository,
@@ -126,25 +123,24 @@ export class SendMessageInApp extends SendMessageBase {
     }
 
     try {
-      content = await this.compileInAppTemplate(step.template.content, command.compileContext, organization);
+      const compiled = await this.compileInAppTemplate.execute(
+        CompileInAppTemplateCommand.create({
+          organizationId: command.organizationId,
+          environmentId: command.environmentId,
+          payload: this.getCompilePayload(command.compileContext),
+          content: step.template.content as string,
+          cta: step.template.cta,
+          userId: command.userId,
+        })
+      );
+      content = compiled.content;
 
       if (step.template.cta?.data?.url) {
-        step.template.cta.data.url = await this.compileInAppTemplate(
-          step.template.cta?.data?.url,
-          command.compileContext,
-          organization
-        );
+        step.template.cta.data.url = compiled.url;
       }
 
       if (step.template.cta?.action?.buttons) {
-        const ctaButtons: IMessageButton[] = [];
-
-        for (const action of step.template.cta.action.buttons) {
-          const buttonContent = await this.compileInAppTemplate(action.content, command.compileContext, organization);
-          ctaButtons.push({ type: action.type, content: buttonContent });
-        }
-
-        step.template.cta.action.buttons = ctaButtons;
+        step.template.cta.action.buttons = compiled.ctaButtons;
       }
     } catch (e) {
       await this.sendErrorHandlebars(command.job, e.message);
@@ -277,20 +273,4 @@ export class SendMessageInApp extends SendMessageBase {
       command.organizationId
     );
   }
-
-  private async compileInAppTemplate(
-    content: string | IEmailBlock[],
-    payload: any,
-    organization: OrganizationEntity | null
-  ): Promise<string> {
-    return await this.compileTemplate.execute(
-      CompileTemplateCommand.create({
-        template: content as string,
-        data: {
-          ...this.getCompilePayload(payload),
-          branding: { logo: organization?.branding?.logo, color: organization?.branding?.color || '#f47373' },
-        },
-      })
-    );
-  }
 }

apps/worker/src/app/workflow/workflow.module.ts

@@ -32,6 +32,7 @@ import {
   SubscriberJobBound,
   TriggerBroadcast,
   TriggerMulticast,
+  CompileInAppTemplate,
 } from '@novu/application-generic';
 import { JobRepository } from '@novu/dal';
 
@@ -131,6 +132,7 @@ const USE_CASES = [
   SubscriberJobBound,
   TriggerBroadcast,
   TriggerMulticast,
+  CompileInAppTemplate,
 ];
 
 const PROVIDERS: Provider[] = [

packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.command.ts

@@ -0,0 +1,15 @@
+import { IsDefined, IsOptional } from 'class-validator';
+import { IMessageCTA } from '@novu/shared';
+
+import { EnvironmentWithUserCommand } from '../../commands/project.command';
+
+export class CompileInAppTemplateCommand extends EnvironmentWithUserCommand {
+  @IsDefined()
+  content: string;
+
+  @IsDefined()
+  payload: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  @IsOptional()
+  cta?: IMessageCTA;
+}