chore(dashboard): improve in-app preview and handle gracefully api fa…

…ilure

apps/dashboard/src/components/workflow-editor/steps/in-app/configure-in-app-step-preview.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import { ChannelTypeEnum } from '@novu/shared';
+
 import { usePreviewStep } from '@/hooks';
 import {
   InAppPreview,
@@ -10,11 +12,10 @@ import {
   InAppPreviewNotificationContent,
   InAppPreviewSubject,
 } from '@/components/workflow-editor/in-app-preview';
-import { InAppRenderOutput } from '@novu/shared';
 import { useStep } from '@/components/workflow-editor/steps/step-provider';
 
 export function ConfigureInAppStepPreview() {
-  const { previewStep, data, isPending: isPreviewPending } = usePreviewStep();
+  const { previewStep, data: previewData, isPending: isPreviewPending } = usePreviewStep();
   const { step, isPending } = useStep();
 
   const { workflowSlug, stepSlug } = useParams<{
@@ -32,24 +33,45 @@ export function ConfigureInAppStepPreview() {
     });
   }, [workflowSlug, stepSlug, previewStep, step, isPending]);
 
-  if (!isPreviewPending && !data?.result) {
-    return null;
+  const previewResult = previewData?.result;
+  if (isPreviewPending || previewData === undefined) {
+    return (
+      <InAppPreview>
+        <InAppPreviewHeader />
+        <InAppPreviewNotification>
+          <InAppPreviewAvatar isPending />
+          <InAppPreviewNotificationContent>
+            <InAppPreviewSubject isPending />
+            <InAppPreviewBody isPending className="line-clamp-2" />
+          </InAppPreviewNotificationContent>
+        </InAppPreviewNotification>
+      </InAppPreview>
+    );
+  }
+
+  if (previewResult?.type === undefined || previewResult?.type !== ChannelTypeEnum.IN_APP) {
+    return (
+      <InAppPreview>
+        <InAppPreviewHeader />
+        <InAppPreviewNotification className="flex-1 items-center">
+          <InAppPreviewNotificationContent className="my-auto">
+            <InAppPreviewBody className="mb-4 text-center">No preview available</InAppPreviewBody>
+          </InAppPreviewNotificationContent>
+        </InAppPreviewNotification>
+      </InAppPreview>
+    );
   }
 
-  const preview = data?.result?.preview as InAppRenderOutput | undefined;
+  const preview = previewResult.preview;
 
   return (
     <InAppPreview>
       <InAppPreviewHeader />
-
       <InAppPreviewNotification>
-        <InAppPreviewAvatar src={preview?.avatar} isPending={isPreviewPending} />
-
+        <InAppPreviewAvatar src={preview?.avatar} />
         <InAppPreviewNotificationContent>
-          <InAppPreviewSubject isPending={isPreviewPending}>{preview?.subject}</InAppPreviewSubject>
-          <InAppPreviewBody isPending={isPreviewPending} className="line-clamp-2">
-            {preview?.body}
-          </InAppPreviewBody>
+          <InAppPreviewSubject>{preview?.subject}</InAppPreviewSubject>
+          <InAppPreviewBody className="line-clamp-2">{preview?.body}</InAppPreviewBody>
         </InAppPreviewNotificationContent>
       </InAppPreviewNotification>
     </InAppPreview>

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor-preview.tsx

@@ -1,27 +1,15 @@
 import { CSSProperties, useEffect, useRef, useState } from 'react';
-import { InAppRenderOutput, StepDataDto, WorkflowResponseDto } from '@novu/shared';
+import { type StepDataDto, type WorkflowResponseDto } from '@novu/shared';
 
 import { Notification5Fill } from '@/components/icons';
 import { Code2 } from '@/components/icons/code-2';
 import { Button } from '@/components/primitives/button';
 import { Editor } from '@/components/primitives/editor';
-import {
-  InAppPreview,
-  InAppPreviewActions,
-  InAppPreviewAvatar,
-  InAppPreviewBell,
-  InAppPreviewBody,
-  InAppPreviewHeader,
-  InAppPreviewNotification,
-  InAppPreviewNotificationContent,
-  InAppPreviewPrimaryAction,
-  InAppPreviewSecondaryAction,
-  InAppPreviewSubject,
-} from '@/components/workflow-editor/in-app-preview';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/primitives/accordion';
 import { InAppTabsSection } from '@/components/workflow-editor/steps/in-app/in-app-tabs-section';
 import { useEditorPreview } from '../use-editor-preview';
+import { InboxPreview } from './inbox-preview';
 
 const getInitialAccordionValue = (value: string) => {
   try {
@@ -66,49 +54,14 @@ export const InAppEditorPreview = ({ workflow, step, formValues }: InAppEditorPr
     return () => clearTimeout(timeout);
   }, [editorValue]);
 
-  const previewResult = previewData?.result;
-  const preview = previewResult?.preview as InAppRenderOutput | undefined;
-
   return (
     <InAppTabsSection>
       <div className="relative flex flex-col gap-3">
         <div className="flex items-center gap-2.5 text-sm font-medium">
           <Notification5Fill className="size-3" />
           In-app template editor
         </div>
-
-        <div className="relative my-2">
-          <div className="relative mx-auto max-w-sm">
-            <InAppPreviewBell />
-
-            <InAppPreview className="min-h-64">
-              <InAppPreviewHeader />
-
-              <InAppPreviewNotification>
-                <InAppPreviewAvatar src={preview?.avatar} isPending={isPreviewPending} />
-
-                <InAppPreviewNotificationContent>
-                  <InAppPreviewSubject isPending={isPreviewPending}>{preview?.subject}</InAppPreviewSubject>
-                  <InAppPreviewBody isPending={isPreviewPending} className="line-clamp-6">
-                    {preview?.body}
-                  </InAppPreviewBody>
-
-                  <InAppPreviewActions>
-                    <InAppPreviewPrimaryAction isPending={isPreviewPending}>
-                      {preview?.primaryAction?.label}
-                    </InAppPreviewPrimaryAction>
-
-                    <InAppPreviewSecondaryAction isPending={isPreviewPending}>
-                      {preview?.secondaryAction?.label}
-                    </InAppPreviewSecondaryAction>
-                  </InAppPreviewActions>
-                </InAppPreviewNotificationContent>
-              </InAppPreviewNotification>
-            </InAppPreview>
-          </div>
-          <div className="to-background absolute -bottom-3 h-16 w-full bg-gradient-to-b from-transparent to-80%" />
-        </div>
-
+        <InboxPreview isPreviewPending={isPreviewPending} previewData={previewData} />
         <Accordion type="single" collapsible value={accordionValue} onValueChange={setAccordionValue}>
           <AccordionItem value="payload">
             <AccordionTrigger>

apps/dashboard/src/components/workflow-editor/steps/in-app/inbox-preview.tsx

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { ChannelTypeEnum, type GeneratePreviewResponseDto } from '@novu/shared';
+import {
+  InAppPreview,
+  InAppPreviewActions,
+  InAppPreviewAvatar,
+  InAppPreviewBell,
+  InAppPreviewBody,
+  InAppPreviewHeader,
+  InAppPreviewNotification,
+  InAppPreviewNotificationContent,
+  InAppPreviewPrimaryAction,
+  InAppPreviewSecondaryAction,
+  InAppPreviewSubject,
+} from '@/components/workflow-editor/in-app-preview';
+
+const InboxPreviewContainer = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="relative my-2">
+      <div className="relative mx-auto max-w-sm">
+        <InAppPreviewBell />
+        <InAppPreview className="min-h-64">
+          <InAppPreviewHeader />
+          {children}
+        </InAppPreview>
+      </div>
+      <div className="to-background absolute -bottom-3 h-16 w-full bg-gradient-to-b from-transparent to-80%" />
+    </div>
+  );
+};
+
+export const InboxPreview = ({
+  isPreviewPending,
+  previewData,
+}: {
+  isPreviewPending: boolean;
+  previewData?: GeneratePreviewResponseDto;
+}) => {
+  const previewResult = previewData?.result;
+  if (isPreviewPending || previewData === undefined) {
+    return (
+      <InboxPreviewContainer>
+        <InAppPreviewNotification>
+          <InAppPreviewAvatar isPending />
+          <InAppPreviewNotificationContent>
+            <InAppPreviewSubject isPending />
+            <InAppPreviewBody isPending className="line-clamp-6" />
+            <InAppPreviewActions>
+              <InAppPreviewPrimaryAction isPending />
+              <InAppPreviewSecondaryAction isPending />
+            </InAppPreviewActions>
+          </InAppPreviewNotificationContent>
+        </InAppPreviewNotification>
+      </InboxPreviewContainer>
+    );
+  }
+
+  if (previewResult?.type === undefined || previewResult?.type !== ChannelTypeEnum.IN_APP) {
+    return (
+      <InboxPreviewContainer>
+        <InAppPreviewNotification className="flex-1 items-center">
+          <InAppPreviewNotificationContent className="my-auto">
+            <InAppPreviewBody className="mb-4 text-center">No preview available</InAppPreviewBody>
+          </InAppPreviewNotificationContent>
+        </InAppPreviewNotification>
+      </InboxPreviewContainer>
+    );
+  }
+
+  const preview = previewResult.preview;
+
+  return (
+    <InboxPreviewContainer>
+      <InAppPreviewNotification>
+        <InAppPreviewAvatar src={preview?.avatar} />
+        <InAppPreviewNotificationContent>
+          <InAppPreviewSubject>{preview?.subject}</InAppPreviewSubject>
+          <InAppPreviewBody className="line-clamp-6">{preview?.body}</InAppPreviewBody>
+          <InAppPreviewActions>
+            <InAppPreviewPrimaryAction>{preview?.primaryAction?.label}</InAppPreviewPrimaryAction>
+            <InAppPreviewSecondaryAction>{preview?.secondaryAction?.label}</InAppPreviewSecondaryAction>
+          </InAppPreviewActions>
+        </InAppPreviewNotificationContent>
+      </InAppPreviewNotification>
+    </InboxPreviewContainer>
+  );
+};

apps/dashboard/src/components/workflow-editor/steps/use-editor-preview.tsx

@@ -70,5 +70,11 @@ export const useEditorPreview = ({
     });
   }, [workflowSlug, stepSlug, controlValues, editorValue, previewStep]);
 
-  return { editorValue, setEditorValue, previewStep: previewStepCallback, previewData, isPreviewPending };
+  return {
+    editorValue,
+    setEditorValue,
+    previewStep: previewStepCallback,
+    previewData,
+    isPreviewPending,
+  };
 };