feat(web): translation management variants preview

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

@@ -144,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,
@@ -153,6 +156,7 @@ export class ContentTemplatesController {
           nsSeparator: '.',
           lng: locale || 'en',
           compatibilityJSON: 'v2',
+          fallbackLng: defaultLocale,
           interpolation: {
             formatSeparator: ',',
             format: function (value, formatting, lng) {

apps/web/cypress/support/commands.ts

@@ -14,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/notification-editor/create-notification.spec.ts

@@ -25,13 +25,13 @@ describe('Creation functionality', function () {
       .parent()
       .click()
       .find('textarea')
-      .type('<p>{{firstName}} someone assigned you to {{taskName}}', {
+      .type('<p>{{firstName}} someone assigned you to {{taskName}}</p>', {
         parseSpecialCharSequences: false,
         force: true,
       });
     cy.getByTestId('inAppRedirect').type('/example/test');
     cy.getByTestId('editor-mode-switch').find('label').last().click();
-    cy.getByTestId('in-app-content-preview').contains('firstName someone assigned you to taskName');
+    cy.getByTestId('in-app-content-preview').contains('firstName someone assigned you to taskName', { timeout: 1000 });
 
     goBack();
     cy.getByTestId('notification-template-submit-btn').click();

apps/web/cypress/tests/notification-editor/variants.spec.ts

@@ -88,7 +88,7 @@ describe('Workflow Editor - Variants', function () {
     cy.getByTestId('add-new-condition').click();
     cy.getByTestId('conditions-form-key').last().type('test');
     cy.getByTestId('conditions-form-value').last().type('test');
-    cy.getByTestId('apply-conditions-btn').click();
+    cy.getByTestId('apply-conditions-btn').click({ force: true });
   };
 
   const checkTheVariantsList = (title: string, content: string) => {
@@ -350,7 +350,7 @@ describe('Workflow Editor - Variants', function () {
       fillEditorContent(channel, true);
       goBack();
 
-      cy.getByTestId('editor-sidebar-add-variant').should('be.visible').click();
+      cy.getByTestId('variant-sidebar-add-variant').should('be.visible').click();
       addConditions();
       fillEditorContent(channel, true);
       goBack();
@@ -592,11 +592,14 @@ describe('Workflow Editor - Variants', function () {
       addConditions();
       goBack();
 
-      cy.getByTestId('variants-list-sidebar').getByTestId('editor-sidebar-add-conditions').should('be.visible').click();
+      cy.getByTestId('variants-list-sidebar')
+        .getByTestId('variant-sidebar-add-conditions')
+        .should('be.visible')
+        .click();
       addConditions();
 
       cy.getByTestId('variants-list-sidebar')
-        .getByTestId('editor-sidebar-edit-conditions')
+        .getByTestId('variant-sidebar-edit-conditions')
         .should('be.visible')
         .contains('1');
     });
@@ -838,7 +841,7 @@ describe('Workflow Editor - Variants', function () {
       cy.reload();
       cy.wait('@getWorkflow');
 
-      cy.getByTestId('editor-sidebar-delete').click();
+      cy.getByTestId('variant-sidebar-delete').click();
 
       cy.get('.mantine-Modal-modal').contains('Delete step?');
       cy.get('.mantine-Modal-modal button').contains('Delete step').click();

apps/web/cypress/tests/translations/translation-group.spec-ee.ts

@@ -25,8 +25,8 @@ describe('Translations Group Page', function () {
 
   it('should upload translation file', function () {
     createTranslationGroup();
-    cy.getByTestId('upload-menu').click();
-    cy.getByTestId('upload-files-dropdown-item').find('input').attachFile('translation.json');
+
+    cy.getByTestId('upload-files-container').find('input').attachFile('translation.json');
     cy.getByTestId('upload-submit-btn').click();
     cy.visit('/translations');
     cy.getByTestId('test-group').click();

apps/web/src/App.tsx

@@ -162,7 +162,7 @@ function App() {
                     <Route path="providers" element={<ProvidersPage />} />
                     <Route path=":channel/:stepUuid" element={<ChannelStepEditor />} />
                     <Route path=":channel/:stepUuid/preview" element={<ChannelPreview />} />
-                    <Route path=":channel/:stepUuid/variants" element={<VariantsPage />} />
+                    <Route path=":channel/:stepUuid/variants/:variantUuid/preview" element={<VariantsPage />} />
                     <Route path=":channel/:stepUuid/variants/:variantUuid" element={<ChannelStepEditor />} />
                     <Route path=":channel/:stepUuid/variants/create" element={<VariantsPage />} />
                   </Route>

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

@@ -1,4 +1,4 @@
-import { IEmailBlock, MessageTemplateContentType } from '@novu/shared';
+import { IEmailBlock, IMessageButton, IMessageCTA, MessageTemplateContentType } from '@novu/shared';
 import { api } from './api.client';
 
 export async function previewEmail({
@@ -26,7 +26,7 @@ export async function previewInApp({
   locale,
 }: {
   content?: string;
-  cta: any;
+  cta?: IMessageCTA;
   payload: string;
   locale?: string;
 }) {

apps/web/src/api/hooks/index.ts

@@ -7,3 +7,5 @@ export * from './useGetLocalesFromContent';
 export * from './usePreviewEmail';
 export * from './usePreviewSms';
 export * from './usePreviewPush';
+export * from './usePreviewChat';
+export * from './usePreviewInApp';

apps/web/src/api/hooks/useGetLocalesFromContent.ts

@@ -19,7 +19,7 @@ export interface ILocale {
 }
 
 type Payload = {
-  content: string | IEmailBlock[];
+  content?: string | IEmailBlock[];
 };
 
 export const useGetLocalesFromContent = () => {

apps/web/src/api/hooks/usePreviewChat.ts

@@ -0,0 +1,45 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { errorMessage } from '@novu/design-system';
+import type { IResponseError } from '@novu/shared';
+import { IS_DOCKER_HOSTED } from '@novu/shared-web';
+
+import { previewChat } from '../content-templates';
+
+type PayloadType = {
+  content?: string;
+  payload: string;
+  locale?: string;
+};
+
+type ResultType = { content: string };
+
+export const usePreviewChat = (options: UseMutationOptions<ResultType, IResponseError, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, IResponseError, PayloadType>(
+    ({ content, payload, locale }) => previewChat({ content, payload, locale }),
+    {
+      onError: (e) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getChatPreview = useCallback(
+    async ({ content, payload, locale }: PayloadType) => {
+      await mutateAsync({
+        content,
+        payload,
+        locale,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getChatPreview,
+    isLoading,
+  };
+};

apps/web/src/api/hooks/usePreviewEmail.ts

@@ -33,10 +33,6 @@ export const usePreviewEmail = (options: UseMutationOptions<ResultType, IRespons
 
   const getEmailPreviewCallback = useCallback(
     async ({ content, payload, contentType, layoutId, locale, subject }: PayloadType) => {
-      if (IS_DOCKER_HOSTED) {
-        return;
-      }
-
       await mutateAsync({
         content,
         payload,

apps/web/src/api/hooks/usePreviewInApp.tsx

@@ -0,0 +1,48 @@
+import { errorMessage } from '@novu/design-system';
+import { IMessageButton, IMessageCTA } from '@novu/shared';
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { previewInApp } from '../content-templates';
+
+type PayloadType = {
+  content?: string;
+  cta?: IMessageCTA;
+  payload: string;
+  locale?: string;
+};
+
+type ResultType = { content: string; ctaButtons: IMessageButton[] };
+
+type ErrorType = { error: string; message: string; statusCode: number };
+
+export const usePreviewInApp = (options: UseMutationOptions<ResultType, ErrorType, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, ErrorType, PayloadType>(
+    ({ content, payload, locale, cta }) => previewInApp({ content, payload, locale, cta }),
+
+    {
+      onError: (e: any) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getInAppPreviewCallback = useCallback(
+    async ({ content, payload, locale, cta }: PayloadType) => {
+      await mutateAsync({
+        content,
+        payload,
+        locale,
+        cta,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getInAppPreview: getInAppPreviewCallback,
+    isLoading,
+  };
+};

apps/web/src/api/hooks/usePreviewSms.ts

@@ -28,12 +28,8 @@ export const usePreviewSms = (options: UseMutationOptions<ResultType, IResponseE
   );
 
   const getSmsPreview = useCallback(
-    ({ content, payload, locale }: PayloadType) => {
-      if (IS_DOCKER_HOSTED) {
-        return;
-      }
-
-      return mutateAsync({
+    async ({ content, payload, locale }: PayloadType) => {
+      await mutateAsync({
         content,
         payload: JSON.parse(payload),
         locale,

apps/web/src/components/workflow/preview/chat/ChatContent.tsx

@@ -6,21 +6,21 @@ import { NovuGreyIcon, PreviewEditOverlay } from '../common';
 import { When } from '../../../utils/When';
 import { useHover } from '../../../../hooks';
 
-export function ChatContent({ isLoading, content, errorMsg }) {
+export function ChatContent({ isLoading, content, errorMsg, showOverlay = true }) {
   const { isHovered, onMouseEnter, onMouseLeave } = useHover();
   const { colorScheme } = useMantineColorScheme();
   const isDark = colorScheme === 'dark';
 
   return (
     <ContentAndOVerlayWrapperStyled onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-      {isHovered && <PreviewEditOverlay />}
+      {isHovered && showOverlay && <PreviewEditOverlay />}
       <Group
         spacing={16}
         align="flex-start"
         noWrap
         sx={{
           position: 'relative',
-          ...(isHovered && { filter: 'blur(2px)' }),
+          ...(isHovered && showOverlay && { filter: 'blur(2px)' }),
         }}
       >
         <When truthy={isLoading}>
@@ -76,4 +76,6 @@ const ContentAndOVerlayWrapperStyled = styled.div`
   position: relative;
   padding-top: 1.5rem;
   padding-bottom: 1.25rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
 `;