feat: onboarding experiment

.eslintrc.js

@@ -27,7 +27,7 @@ module.exports = {
     '@typescript-eslint/lines-between-class-members': 'off',
     'react/jsx-wrap-multilines': 'off',
     'react/jsx-filename-extension': 'off',
-    'multiline-comment-style': ['error', 'starred-block'],
+    'multiline-comment-style': ['warn', 'starred-block'],
     'promise/catch-or-return': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-expressions': 'off',

apps/api/src/app/change/usecases/get-changes/get-changes.usecase.ts

@@ -11,6 +11,8 @@ import {
 import { ChangeEntityTypeEnum } from '@novu/shared';
 import { ChangesResponseDto } from '../../dtos/change-response.dto';
 import { GetChangesCommand } from './get-changes.command';
+import { ApiException } from '../../../shared/exceptions/api.exception';
+import { ModuleRef } from '@nestjs/core';
 
 interface IViewEntity {
   templateName: string;
@@ -32,7 +34,8 @@ export class GetChanges {
     private messageTemplateRepository: MessageTemplateRepository,
     private notificationGroupRepository: NotificationGroupRepository,
     private feedRepository: FeedRepository,
-    private layoutRepository: LayoutRepository
+    private layoutRepository: LayoutRepository,
+    protected moduleRef: ModuleRef
   ) {}
 
   async execute(command: GetChangesCommand): Promise<ChangesResponseDto> {
@@ -65,6 +68,12 @@ export class GetChanges {
       if (change.type === ChangeEntityTypeEnum.DEFAULT_LAYOUT) {
         item = await this.getTemplateDataForDefaultLayout(change._entityId, command.environmentId);
       }
+      if (change.type === ChangeEntityTypeEnum.TRANSLATION) {
+        item = await this.getTemplateDataForTranslation(change._entityId, command.environmentId);
+      }
+      if (change.type === ChangeEntityTypeEnum.TRANSLATION_GROUP) {
+        item = await this.getTemplateDataForTranslationGroup(change._entityId, command.environmentId);
+      }
 
       list.push({
         ...change,
@@ -133,6 +142,54 @@ export class GetChanges {
     };
   }
 
+  private async getTemplateDataForTranslationGroup(
+    entityId: string,
+    environmentId: string
+  ): Promise<IViewEntity | Record<string, unknown>> {
+    try {
+      if (process.env.NOVU_ENTERPRISE === 'true' || process.env.CI_EE_TEST === 'true') {
+        if (!require('@novu/ee-translation')?.TranslationsService) {
+          throw new ApiException('Translation module is not loaded');
+        }
+        const service = this.moduleRef.get(require('@novu/ee-translation')?.TranslationsService, { strict: false });
+        const { name, identifier } = await service.getTranslationGroupData(environmentId, entityId);
+
+        return {
+          templateId: identifier,
+          templateName: name,
+        };
+      }
+    } catch (e) {
+      Logger.error(e, `Unexpected error while importing enterprise modules`, 'TranslationsService');
+    }
+
+    return {};
+  }
+
+  private async getTemplateDataForTranslation(
+    entityId: string,
+    environmentId: string
+  ): Promise<IViewEntity | Record<string, unknown>> {
+    try {
+      if (process.env.NOVU_ENTERPRISE === 'true' || process.env.CI_EE_TEST === 'true') {
+        if (!require('@novu/ee-translation')?.TranslationsService) {
+          throw new ApiException('Translation module is not loaded');
+        }
+        const service = this.moduleRef.get(require('@novu/ee-translation')?.TranslationsService, { strict: false });
+        const { name, group } = await service.getTranslationData(environmentId, entityId);
+
+        return {
+          templateName: name,
+          translationGroup: group,
+        };
+      }
+    } catch (e) {
+      Logger.error(e, `Unexpected error while importing enterprise modules`, 'TranslationsService');
+    }
+
+    return {};
+  }
+
   private async getTemplateDataForNotificationGroup(
     entityId: string,
     environmentId: string

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

@@ -34,7 +34,8 @@ export class ContentTemplatesController {
     @Body('contentType') contentType: MessageTemplateContentType,
     @Body('payload') payload: any,
     @Body('subject') subject: string,
-    @Body('layoutId') layoutId: string
+    @Body('layoutId') layoutId: string,
+    @Body('locale') locale?: string
   ) {
     return this.compileEmailTemplateUsecase.execute(
       CompileEmailTemplateCommand.create({
@@ -46,6 +47,7 @@ export class ContentTemplatesController {
         payload,
         subject,
         layoutId,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -56,7 +58,8 @@ export class ContentTemplatesController {
     @UserSession() user: IJwtPayload,
     @Body('content') content: string,
     @Body('payload') payload: any,
-    @Body('cta') cta: IMessageCTA
+    @Body('cta') cta: IMessageCTA,
+    @Body('locale') locale?: string
   ) {
     return this.compileInAppTemplate.execute(
       CompileInAppTemplateCommand.create({
@@ -66,20 +69,27 @@ export class ContentTemplatesController {
         content,
         payload,
         cta,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
   }
   // TODO: refactor this to use params and single endpoint to manage all the channels
   @Post('/preview/sms')
-  public previewSms(@UserSession() user: IJwtPayload, @Body('content') content: string, @Body('payload') payload: any) {
+  public previewSms(
+    @UserSession() user: IJwtPayload,
+    @Body('content') content: string,
+    @Body('payload') payload: any,
+    @Body('locale') locale?: string
+  ) {
     return this.compileStepTemplate.execute(
       CompileStepTemplateCommand.create({
         userId: user._id,
         organizationId: user.organizationId,
         environmentId: user.environmentId,
         content,
         payload,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -89,7 +99,8 @@ export class ContentTemplatesController {
   public previewChat(
     @UserSession() user: IJwtPayload,
     @Body('content') content: string,
-    @Body('payload') payload: any
+    @Body('payload') payload: any,
+    @Body('locale') locale?: string
   ) {
     return this.compileStepTemplate.execute(
       CompileStepTemplateCommand.create({
@@ -98,6 +109,7 @@ export class ContentTemplatesController {
         environmentId: user.environmentId,
         content,
         payload,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -107,7 +119,9 @@ export class ContentTemplatesController {
   public previewPush(
     @UserSession() user: IJwtPayload,
     @Body('content') content: string,
-    @Body('payload') payload: any
+    @Body('title') title: string,
+    @Body('payload') payload: any,
+    @Body('locale') locale?: string
   ) {
     return this.compileStepTemplate.execute(
       CompileStepTemplateCommand.create({
@@ -116,6 +130,8 @@ export class ContentTemplatesController {
         environmentId: user.environmentId,
         content,
         payload,
+        locale,
+        title,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -128,7 +144,10 @@ export class ContentTemplatesController {
           throw new ApiException('Translation module is not loaded');
         }
         const service = this.moduleRef.get(require('@novu/ee-translation')?.TranslationsService, { strict: false });
-        const { namespaces, resources } = await service.getTranslationsList(environmentId, organizationId);
+        const { namespaces, resources, defaultLocale } = await service.getTranslationsList(
+          environmentId,
+          organizationId
+        );
 
         await i18next.init({
           resources,
@@ -137,6 +156,7 @@ export class ContentTemplatesController {
           nsSeparator: '.',
           lng: locale || 'en',
           compatibilityJSON: 'v2',
+          fallbackLng: defaultLocale,
           interpolation: {
             formatSeparator: ',',
             format: function (value, formatting, lng) {

apps/api/src/app/message-template/usecases/create-message-template/create-message-template.usecase.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
-import { MessageTemplateEntity, MessageTemplateRepository } from '@novu/dal';
-import { ChangeEntityTypeEnum, IMessageAction } from '@novu/shared';
+import { MessageTemplateEntity, MessageTemplateRepository, LayoutEntity, LayoutRepository } from '@novu/dal';
+import { ChangeEntityTypeEnum, IMessageAction, StepTypeEnum } from '@novu/shared';
 
 import { CreateMessageTemplateCommand } from './create-message-template.command';
 import { sanitizeMessageContent } from '../../shared/sanitizer.service';
@@ -13,6 +13,7 @@ import { ApiException, CreateChange, CreateChangeCommand } from '@novu/applicati
 export class CreateMessageTemplate {
   constructor(
     private messageTemplateRepository: MessageTemplateRepository,
+    private layoutRepository: LayoutRepository,
     private createChange: CreateChange,
     private updateChange: UpdateChange
   ) {}
@@ -22,6 +23,14 @@ export class CreateMessageTemplate {
       throw new ApiException('Please provide a valid CTA action');
     }
 
+    let layoutId: string | undefined | null;
+    if (command.type === StepTypeEnum.EMAIL && !command.layoutId) {
+      const defaultLayout = await this.layoutRepository.findDefault(command.environmentId, command.organizationId);
+      layoutId = defaultLayout?._id;
+    } else {
+      layoutId = command.layoutId;
+    }
+
     let item: MessageTemplateEntity = await this.messageTemplateRepository.create({
       cta: command.cta,
       name: command.name,
@@ -32,7 +41,7 @@ export class CreateMessageTemplate {
       title: command.title,
       type: command.type,
       _feedId: command.feedId ? command.feedId : null,
-      _layoutId: command.layoutId || null,
+      _layoutId: layoutId,
       _organizationId: command.organizationId,
       _environmentId: command.environmentId,
       _creatorId: command.userId,

apps/api/src/app/testing/translations/get-locales-from-content.e2e-ee.ts

@@ -0,0 +1,36 @@
+import { UserSession } from '@novu/testing';
+import { expect } from 'chai';
+
+const createTranslationGroup = {
+  name: 'test',
+  identifier: 'test',
+  locales: ['hi_IN', 'en_US'],
+};
+
+const content = 'Hello {{i18n "test.key1"}}, {{i18n "test.key2"}}, {{i18n "test.key3"}}';
+
+describe('Get locales from content - /translations/groups/:identifier/locales/:locale (PATCH)', async () => {
+  let session: UserSession;
+
+  before(async () => {
+    session = new UserSession();
+    await session.initialize();
+    await session.testAgent.put(`/v1/organizations/language`).send({
+      locale: createTranslationGroup.locales[0],
+    });
+
+    await session.testAgent.post('/v1/translations/groups').send(createTranslationGroup);
+  });
+
+  it('should get locales from the content', async () => {
+    const { body } = await session.testAgent.post('/v1/translations/groups/preview/locales').send({
+      content,
+    });
+
+    const locales = body.data;
+
+    expect(locales.length).to.equal(2);
+    expect(locales[0].langIso).to.equal(createTranslationGroup.locales[0]);
+    expect(locales[1].langIso).to.equal(createTranslationGroup.locales[1]);
+  });
+});

apps/web/cypress/fixtures/translation.json

@@ -0,0 +1,19 @@
+{
+  "key": "value",
+  "keyDeep": {
+    "inner": "value"
+  },
+  "keyNesting": "reuse $t(keyDeep.inner)",
+  "keyInterpolate": "replace this {{value}}",
+  "keyInterpolateUnescaped": "replace this {{- value}}",
+  "keyContext_male": "the male variant",
+  "keyContext_female": "the female variant",
+  "keyPluralSimple": "the singular",
+  "keyPluralSimple_plural": "the plural",
+  "keyPluralMultipleEgArabic_0": "the plural form 0",
+  "keyPluralMultipleEgArabic_1": "the plural form 1",
+  "keyPluralMultipleEgArabic_2": "the plural form 2",
+  "keyPluralMultipleEgArabic_3": "the plural form 3",
+  "keyPluralMultipleEgArabic_11": "the plural form 4",
+  "keyPluralMultipleEgArabic_100": "the plural form 5"
+}

apps/web/cypress/support/commands.ts

@@ -3,6 +3,7 @@
 
 import { MemberRoleEnum, MemberStatusEnum } from '@novu/shared';
 import 'cypress-wait-until';
+import 'cypress-file-upload';
 
 Cypress.Commands.add('getByTestId', (selector, ...args) => {
   return cy.get(`[data-test-id=${selector}]`, ...args);
@@ -13,22 +14,22 @@ Cypress.Commands.add('getBySelectorLike', (selector, ...args) => {
 });
 
 Cypress.Commands.add('waitLoadEnv', (beforeWait: () => void): void => {
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments').as('environments');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments/me').as('environments-me');
+  cy.intercept('GET', '**/v1/environments').as('environments');
+  cy.intercept('GET', '**/v1/environments/me').as('environments-me');
 
   beforeWait && beforeWait();
 
   cy.wait(['@environments', '@environments-me']);
 });
 
 Cypress.Commands.add('waitLoadTemplatePage', (beforeWait: () => void): void => {
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments').as('environments');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/organizations').as('organizations');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments/me').as('environments-me');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/notification-groups').as('notification-groups');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/changes/count').as('changes-count');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/integrations/active').as('active-integrations');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/users/me').as('me');
+  cy.intercept('GET', '**/v1/environments').as('environments');
+  cy.intercept('GET', '**/v1/organizations').as('organizations');
+  cy.intercept('GET', '**/v1/environments/me').as('environments-me');
+  cy.intercept('GET', '**/v1/notification-groups').as('notification-groups');
+  cy.intercept('GET', '**/v1/changes/count').as('changes-count');
+  cy.intercept('GET', '**/v1/integrations/active').as('active-integrations');
+  cy.intercept('GET', '**/v1/users/me').as('me');
 
   beforeWait && beforeWait();
 

apps/web/cypress/tests/changes.spec.ts

@@ -1,4 +1,4 @@
-import { dragAndDrop } from './notification-editor';
+import { dragAndDrop, editChannel } from './notification-editor';
 import { goBack } from './notification-editor';
 
 describe('Changes Screen', function () {
@@ -122,7 +122,7 @@ function createNotification() {
   cy.visit('/workflows/create');
   cy.waitForNetworkIdle(500);
 
-  cy.getByTestId('title').clear().type('Test Notification Title');
+  cy.getByTestId('name-input').clear().type('Test Notification Title');
 
   cy.getByTestId('settings-page').click();
   cy.waitForNetworkIdle(500);
@@ -135,7 +135,7 @@ function createNotification() {
   dragAndDrop('email');
   cy.waitForNetworkIdle(500);
 
-  cy.clickWorkflowNode(`node-emailSelector`);
+  editChannel('email');
   cy.waitForNetworkIdle(500);
 
   cy.getByTestId('emailSubject').type('this is email subject');

apps/web/cypress/tests/digest-playground.spec.ts

@@ -16,7 +16,7 @@ describe('Digest Playground Workflow Page', function () {
     cy.url().should('include', '/digest-playground');
     cy.contains('Digest Workflow Playground');
 
-    cy.get('a[href="https://docs.novu.co/workflows/digest"]').contains('Learn more in docs');
+    cy.get('a[href="https://docs.novu.co/workflows/digest?utm_campaign=in-app"]').contains('Learn more in docs');
   });
 
   it('the set up digest workflow should redirect to template edit page', function () {