refactor(api-service): variable extraction (#7369)

apps/api/src/app/environments-v1/usecases/output-renderers/hydrate-email-schema.usecase.ts

@@ -2,6 +2,7 @@
 import { Injectable } from '@nestjs/common';
 import { PreviewPayload, TipTapNode } from '@novu/shared';
 import { z } from 'zod';
+import { processNodeAttrs } from '@novu/application-generic';
 import { HydrateEmailSchemaCommand } from './hydrate-email-schema.command';
 import { PlaceholderAggregation } from '../../../workflows-v2/usecases';
 
@@ -87,6 +88,8 @@ export class HydrateEmailSchemaUseCase {
     placeholderAggregation: PlaceholderAggregation
   ) {
     content.forEach((node, index) => {
+      processNodeAttrs(node);
+
       if (this.isVariableNode(node)) {
         this.variableLogic(masterPayload, node, content, index, placeholderAggregation);
       }

apps/api/src/app/environments-v1/usecases/output-renderers/render-email-output.usecase.ts

@@ -13,6 +13,7 @@ import { emailControlZodSchema } from '../../../workflows-v2/shared/schemas/emai
 export class RenderEmailOutputCommand extends RenderCommand {}
 
 @Injectable()
+// todo rename to EmailOutputRenderer
 export class RenderEmailOutputUsecase {
   constructor(private expandEmailEditorSchemaUseCase: ExpandEmailEditorSchemaUsecase) {}
 

apps/api/src/app/workflows-v2/usecases/generate-preview/transform-maily-content-to-liquid.ts

@@ -1,5 +1,6 @@
 import { JSONContent } from '@maily-to/render';
 import _ from 'lodash';
+import { processNodeAttrs, MailyContentTypeEnum } from '@novu/application-generic';
 
 /**
  * Processes raw Maily JSON editor state by converting variables to Liquid.js output syntax
@@ -100,16 +101,12 @@ function processForLoopNode(node: JSONContent): JSONContent {
 function processNode(node: JSONContent): JSONContent {
   if (!node) return node;
 
-  const processedNode: JSONContent = { ...node };
-
-  if (processedNode.attrs) {
-    processedNode.attrs = processAttributes(processedNode.attrs);
-  }
+  const processedNode = processNodeAttrs(node);
 
   switch (processedNode.type) {
-    case 'variable':
+    case MailyContentTypeEnum.VARIABLE:
       return processVariableNode(processedNode);
-    case 'for':
+    case MailyContentTypeEnum.FOR:
       return processForLoopNode(processedNode);
     default:
       if (Array.isArray(processedNode.content)) {
@@ -120,44 +117,6 @@ function processNode(node: JSONContent): JSONContent {
   }
 }
 
-const LIQUID_WRAPPED_KEYS = ['showIfKey'] as const;
-type LiquidWrappedKey = (typeof LIQUID_WRAPPED_KEYS)[number];
-
-/**
- * Processes node attributes by converting specific keys to Liquid.js syntax
- * * Please update LIQUID_WRAPPED_KEYS if you want to wrap more attributes
- * @example
- * // Input
- * {
- *   showIfKey: "user.isActive",
- *   title: "Hello",
- *   color: "blue"
- * }
- * // Output
- * {
- *   showIfKey: "{{user.isActive}}",
- *   title: "Hello",
- *   color: "blue"
- * }
- */
-export function processAttributes(attrs: Record<string, unknown>): Record<string, unknown> {
-  return Object.entries(attrs).reduce(
-    (acc, [key, value]) => ({
-      ...acc,
-      [key]: shouldWrapInLiquid(key) && isString(value) ? wrapInLiquidOutput(value) : value,
-    }),
-    {} as Record<string, unknown>
-  );
-}
-
-function shouldWrapInLiquid(key: string): key is LiquidWrappedKey {
-  return LIQUID_WRAPPED_KEYS.includes(key as LiquidWrappedKey);
-}
-
-function isString(value: unknown): value is string {
-  return typeof value === 'string';
-}
-
 function wrapInLiquidOutput(value: string): string {
   return `{{${value}}}`;
 }

libs/application-generic/package.json

@@ -95,7 +95,8 @@
     "rrule": "^2.7.2",
     "rxjs": "7.8.1",
     "sanitize-html": "^2.4.0",
-    "shortid": "^2.2.16"
+    "shortid": "^2.2.16",
+    "@maily-to/render": "^0.0.17"
   },
   "optionalDependencies": {
     "@novu/ee-shared-services": "workspace:*",

libs/application-generic/src/index.ts

@@ -17,3 +17,4 @@ export * from './tracing';
 export * from './usecases';
 export * from './utils';
 export * from './utils/inject-auth-providers';
+export * from './utils/process-node-attrs';

libs/application-generic/src/utils/process-node-attrs.ts

@@ -0,0 +1,48 @@
+import { JSONContent } from '@maily-to/render';
+
+export enum MailyContentTypeEnum {
+  VARIABLE = 'variable',
+  FOR = 'for',
+  BUTTON = 'button',
+  IMAGE = 'image',
+}
+
+export const variableAttributeConfig = (type: MailyContentTypeEnum) => {
+  //todo add variable type
+  if (type === MailyContentTypeEnum.BUTTON) {
+    return [
+      { attr: 'text', flag: 'isTextVariable' },
+      { attr: 'url', flag: 'isUrlVariable' },
+      { attr: 'showIfKey', flag: 'showIfKey' },
+    ];
+  }
+
+  if (type === MailyContentTypeEnum.IMAGE) {
+    return [
+      { attr: 'src', flag: 'isSrcVariable' },
+      { attr: 'externalLink', flag: 'isExternalLinkVariable' },
+      { attr: 'showIfKey', flag: 'showIfKey' },
+    ];
+  }
+
+  return [{ attr: 'showIfKey', flag: 'showIfKey' }];
+};
+
+export function processNodeAttrs(node: JSONContent): JSONContent {
+  if (!node.attrs) return node;
+
+  const typeConfig = variableAttributeConfig(node.type as MailyContentTypeEnum);
+
+  for (const { attr, flag } of typeConfig) {
+    if (node.attrs[flag] && node.attrs[attr]) {
+      // eslint-disable-next-line no-param-reassign
+      node.attrs[attr] = wrapInLiquidOutput(node.attrs[attr] as string);
+    }
+  }
+
+  return node;
+}
+
+export function wrapInLiquidOutput(value: string): string {
+  return `{{${value}}}`;
+}