feat(web): reusable sms preview component

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

@@ -44,3 +44,15 @@ export async function previewChat({
 }) {
   return api.post('/v1/content-templates/preview/chat', { content, payload, locale });
 }
+
+export async function previewSms({
+  content,
+  payload,
+  locale,
+}: {
+  content?: string | IEmailBlock[];
+  payload: string;
+  locale?: string;
+}): Promise<{ content: string }> {
+  return api.post('/v1/content-templates/preview/sms', { content, payload, locale });
+}

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

@@ -5,3 +5,4 @@ export * from './useWebhookSupportStatus';
 export * from './notification-templates';
 export * from './useGetLocalesFromContent';
 export * from './usePreviewEmail';
+export * from './usePreviewSms';

apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { ICreateNotificationTemplateDto, INotificationTemplate, StepTypeEnum } from '@novu/shared';
+import { StepTypeEnum } from '@novu/shared';
+import type { IResponseError, ICreateNotificationTemplateDto, INotificationTemplate } from '@novu/shared';
 
 import { createTemplate } from '../../notification-templates';
 import { parseUrl } from '../../../utils/routeUtils';
@@ -16,7 +17,7 @@ export const useCreateDigestDemoWorkflow = () => {
   const { groups, loading: areNotificationGroupLoading } = useNotificationGroup();
   const { mutateAsync: createNotificationTemplate, isLoading: isCreating } = useMutation<
     INotificationTemplate & { __source?: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { template: ICreateNotificationTemplateDto; params: { __source?: string } }
   >((data) => createTemplate(data.template, data.params), {
     onSuccess: (template) => {

apps/web/src/api/hooks/notification-templates/useUpdateTemplate.ts

@@ -1,21 +1,21 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query';
-import { INotificationTemplate, IUpdateNotificationTemplateDto } from '@novu/shared';
+import type { IResponseError, INotificationTemplate, IUpdateNotificationTemplateDto } from '@novu/shared';
 
 import { updateTemplate } from '../../notification-templates';
 import { QueryKeys } from '../../query.keys';
 
 export const useUpdateTemplate = (
   options: UseMutationOptions<
     INotificationTemplate,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { id: string; data: Partial<IUpdateNotificationTemplateDto> }
   > = {}
 ) => {
   const client = useQueryClient();
 
   const { mutateAsync: updateTemplateMutation, ...rest } = useMutation<
     INotificationTemplate,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { id: string; data: Partial<IUpdateNotificationTemplateDto> }
   >(({ id, data }) => updateTemplate(id, data), {
     ...options,

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

@@ -1,38 +1,28 @@
 import { MutationOptions, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { IResponseError } from '@novu/shared';
 
 import { deleteIntegration } from '../integration';
 import { QueryKeys } from '../query.keys';
 
 export const useDeleteIntegration = (
-  options: MutationOptions<
-    {},
-    { error: string; message: string; statusCode: number },
-    {
-      id: string;
-      name: string;
-    }
-  > = {}
+  options: MutationOptions<{}, IResponseError, { id: string; name: string }> = {}
 ) => {
   const queryClient = useQueryClient();
 
-  const { mutate: deleteIntegrationMutate, ...rest } = useMutation<
-    {},
-    { error: string; message: string; statusCode: number },
+  const { mutate: deleteIntegrationMutate, ...rest } = useMutation<{}, IResponseError, { id: string; name: string }>(
+    ({ id }) => deleteIntegration(id),
     {
-      id: string;
-      name: string;
-    }
-  >(({ id }) => deleteIntegration(id), {
-    ...options,
-    onSuccess: async (data, variables, context) => {
-      options?.onSuccess?.(data, variables, context);
+      ...options,
+      onSuccess: async (data, variables, context) => {
+        options?.onSuccess?.(data, variables, context);
 
-      await queryClient.refetchQueries({
-        predicate: ({ queryKey }) =>
-          queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
-      });
-    },
-  });
+        await queryClient.refetchQueries({
+          predicate: ({ queryKey }) =>
+            queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
+        });
+      },
+    }
+  );
 
   return {
     deleteIntegration: deleteIntegrationMutate,

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

@@ -1,8 +1,9 @@
 import { errorMessage } from '@novu/design-system';
-import { IEmailBlock } from '@novu/shared';
+import type { IResponseError, IEmailBlock } from '@novu/shared';
 import { IS_DOCKER_HOSTED } from '@novu/shared-web';
 import { useMutation } from '@tanstack/react-query';
 import { useCallback } from 'react';
+
 import { getLocalesFromContent } from '../translations';
 
 export interface ILocale {
@@ -26,14 +27,11 @@ export const useGetLocalesFromContent = () => {
     mutateAsync: getLocalesFromContentMutation,
     isLoading,
     data,
-  } = useMutation<ILocale[], { error: string; message: string; statusCode: number }, Payload>(
-    ({ content }) => getLocalesFromContent({ content }),
-    {
-      onError: (e: any) => {
-        errorMessage(e.message || 'Unexpected error');
-      },
-    }
-  );
+  } = useMutation<ILocale[], IResponseError, Payload>(({ content }) => getLocalesFromContent({ content }), {
+    onError: (e: any) => {
+      errorMessage(e.message || 'Unexpected error');
+    },
+  });
 
   const getLocalesFromContentCallback = useCallback(
     async ({ content }: Payload) => {

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

@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient, UseMutationOptions } from '@tanstack/react-query';
+import type { IResponseError } from '@novu/shared';
 
 import { errorMessage } from '../../utils/notifications';
 import type { IntegrationEntity } from '../../pages/integrations/types';
@@ -7,37 +8,28 @@ import { QueryKeys } from '../query.keys';
 import { setIntegrationAsPrimary } from '../integration';
 
 export const useMakePrimaryIntegration = (
-  options: UseMutationOptions<
-    IntegrationEntity,
-    { error: string; message: string; statusCode: number },
-    {
-      id: string;
-    }
-  > = {}
+  options: UseMutationOptions<IntegrationEntity, IResponseError, { id: string }> = {}
 ) => {
   const queryClient = useQueryClient();
 
-  const { mutate: makePrimaryIntegration, ...rest } = useMutation<
-    IntegrationEntity,
-    { error: string; message: string; statusCode: number },
+  const { mutate: makePrimaryIntegration, ...rest } = useMutation<IntegrationEntity, IResponseError, { id: string }>(
+    ({ id }) => setIntegrationAsPrimary(id),
     {
-      id: string;
+      ...options,
+      onSuccess: (integration, variables, context) => {
+        successMessage(`${integration.name} provider instance is activated and marked as the primary instance`);
+        queryClient.refetchQueries({
+          predicate: ({ queryKey }) =>
+            queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
+        });
+        options?.onSuccess?.(integration, variables, context);
+      },
+      onError: (e: any, variables, context) => {
+        errorMessage(e.message || 'Unexpected error');
+        options?.onError?.(e, variables, context);
+      },
     }
-  >(({ id }) => setIntegrationAsPrimary(id), {
-    ...options,
-    onSuccess: (integration, variables, context) => {
-      successMessage(`${integration.name} provider instance is activated and marked as the primary instance`);
-      queryClient.refetchQueries({
-        predicate: ({ queryKey }) =>
-          queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
-      });
-      options?.onSuccess?.(integration, variables, context);
-    },
-    onError: (e: any, variables, context) => {
-      errorMessage(e.message || 'Unexpected error');
-      options?.onError?.(e, variables, context);
-    },
-  });
+  );
 
   return {
     makePrimaryIntegration,

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

@@ -1,5 +1,5 @@
 import { errorMessage } from '@novu/design-system';
-import { IEmailBlock, MessageTemplateContentType } from '@novu/shared';
+import type { IResponseError, IEmailBlock, MessageTemplateContentType } from '@novu/shared';
 import { IS_DOCKER_HOSTED } from '@novu/shared-web';
 import { useMutation, UseMutationOptions } from '@tanstack/react-query';
 import { useCallback } from 'react';
@@ -16,10 +16,8 @@ export type PayloadType = {
 
 export type ResultType = { html: string; subject: string };
 
-type ErrorType = { error: string; message: string; statusCode: number };
-
-export const usePreviewEmail = (options: UseMutationOptions<ResultType, ErrorType, PayloadType> = {}) => {
-  const { mutateAsync, isLoading } = useMutation<ResultType, ErrorType, PayloadType>(
+export const usePreviewEmail = (options: UseMutationOptions<ResultType, IResponseError, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, IResponseError, PayloadType>(
     ({ content, payload, contentType, layoutId, locale, subject }) =>
       previewEmail({ content, payload, contentType, layoutId, locale, subject }),
 

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

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

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

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { IUpdateIntegrationBodyDto } from '@novu/shared';
+import type { IResponseError, IUpdateIntegrationBodyDto } from '@novu/shared';
 
 import { errorMessage } from '../../utils/notifications';
 import { updateIntegration } from '../integration';
@@ -12,7 +12,7 @@ export const useUpdateIntegration = (integrationId: string) => {
 
   const { mutateAsync: updateIntegrationMutation, isLoading: isLoadingUpdate } = useMutation<
     IntegrationEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       id: string;
       data: IUpdateIntegrationBodyDto;

apps/web/src/components/layout/components/OrganizationSelect.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import * as capitalize from 'lodash.capitalize';
 import styled from '@emotion/styled';
-import { IOrganizationEntity } from '@novu/shared';
+import type { IResponseError, IOrganizationEntity } from '@novu/shared';
 
 import { Select } from '@novu/design-system';
 import { addOrganization, switchOrganization } from '../../../api/organization';
@@ -20,15 +20,13 @@ export default function OrganizationSelect() {
 
   const { isLoading: loadingAddOrganization, mutateAsync: createOrganization } = useMutation<
     IOrganizationEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     string
   >((name) => addOrganization(name));
 
-  const { mutateAsync: changeOrganization } = useMutation<
-    string,
-    { error: string; message: string; statusCode: number },
-    string
-  >((id) => switchOrganization(id));
+  const { mutateAsync: changeOrganization } = useMutation<string, IResponseError, string>((id) =>
+    switchOrganization(id)
+  );
 
   const switchOrgCallback = useCallback(
     async (organizationId: string | string[] | null) => {

apps/web/src/components/quick-start/in-app-onboarding/TriggerNode.tsx

@@ -1,13 +1,13 @@
 import { Handle, Position } from 'react-flow-renderer';
-
 import { Button, colors, shadows, Text, Title, BoltOutlinedGradient, Playground } from '@novu/design-system';
-
 import styled from '@emotion/styled';
 import { createStyles, Group, Popover, Stack, useMantineColorScheme } from '@mantine/core';
-import { ActorTypeEnum, INotificationTemplate, StepTypeEnum, SystemAvatarIconEnum } from '@novu/shared';
+import { ActorTypeEnum, StepTypeEnum, SystemAvatarIconEnum } from '@novu/shared';
+import type { IResponseError, INotificationTemplate } from '@novu/shared';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+
 import { createTemplate, testTrigger } from '../../../api/notification-templates';
 import { useEffectOnce, useNotificationGroup, useTemplates } from '../../../hooks';
 import {
@@ -65,7 +65,7 @@ function TriggerButton({ setOpened }: { setOpened: (value: boolean) => void }) {
 
   const { mutate: createNotificationTemplate, isLoading: createTemplateLoading } = useMutation<
     INotificationTemplate & { __source?: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { template: ICreateNotificationTemplateDto; params: { __source?: string } }
   >((data) => createTemplate(data.template, data.params), {
     onError: (error) => {