feat(dashboard): Nv 4884 push mini preview (#7318)

apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx

@@ -50,6 +50,7 @@ import {
 } from '@/utils/constants';
 import { buildRoute, ROUTES } from '@/utils/routes';
 import { buildDefaultValues, buildDefaultValuesOfDataSchema, buildDynamicZodSchema } from '@/utils/schema';
+import { ConfigurePushStepPreview } from './push/configure-push-step-preview';
 
 const STEP_TYPE_TO_INLINE_CONTROL_VALUES: Record<StepTypeEnum, () => React.JSX.Element | null> = {
   [StepTypeEnum.DELAY]: DelayControlValues,
@@ -68,7 +69,7 @@ const STEP_TYPE_TO_PREVIEW: Record<StepTypeEnum, ((props: HTMLAttributes<HTMLDiv
   [StepTypeEnum.EMAIL]: ConfigureEmailStepPreview,
   [StepTypeEnum.SMS]: ConfigureSmsStepPreview,
   [StepTypeEnum.CHAT]: null,
-  [StepTypeEnum.PUSH]: null,
+  [StepTypeEnum.PUSH]: ConfigurePushStepPreview,
   [StepTypeEnum.CUSTOM]: null,
   [StepTypeEnum.TRIGGER]: null,
   [StepTypeEnum.DIGEST]: null,

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

@@ -0,0 +1,37 @@
+import { usePreviewStep } from '@/hooks/use-preview-step';
+import { PushPreview } from './push-preview';
+import * as Sentry from '@sentry/react';
+import { useWorkflow } from '../../workflow-provider';
+import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+
+export function ConfigurePushStepPreview() {
+  const {
+    previewStep,
+    data: previewData,
+    isPending: isPreviewPending,
+  } = usePreviewStep({
+    onError: (error) => {
+      Sentry.captureException(error);
+    },
+  });
+
+  const { step, isPending } = useWorkflow();
+
+  const { workflowSlug, stepSlug } = useParams<{
+    workflowSlug: string;
+    stepSlug: string;
+  }>();
+
+  useEffect(() => {
+    if (!workflowSlug || !stepSlug || !step || isPending) return;
+
+    previewStep({
+      workflowSlug,
+      stepSlug,
+      previewData: { controlValues: step.controls.values, previewPayload: {} },
+    });
+  }, [workflowSlug, stepSlug, previewStep, step, isPending]);
+
+  return <PushPreview previewData={previewData} isPreviewPending={isPreviewPending} />;
+}

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

@@ -0,0 +1,116 @@
+import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { type StepDataDto, type WorkflowResponseDto } from '@novu/shared';
+import { Code2 } from '@/components/icons/code-2';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/primitives/accordion';
+import { Button } from '@/components/primitives/button';
+import { Editor } from '@/components/primitives/editor';
+import { loadLanguage } from '@uiw/codemirror-extensions-langs';
+import { useEditorPreview } from '../use-editor-preview';
+import { PushPreview } from './push-preview';
+import { RiCellphoneFill } from 'react-icons/ri';
+import { PushTabsSection } from './push-tabs-section';
+
+const getInitialAccordionValue = (value: string) => {
+  try {
+    return Object.keys(JSON.parse(value)).length > 0 ? 'payload' : undefined;
+  } catch (e) {
+    return undefined;
+  }
+};
+
+type PushEditorPreviewProps = {
+  workflow: WorkflowResponseDto;
+  step: StepDataDto;
+  formValues: Record<string, unknown>;
+};
+
+const extensions = [loadLanguage('json')?.extension ?? []];
+
+export const PushEditorPreview = ({ workflow, step, formValues }: PushEditorPreviewProps) => {
+  const workflowSlug = workflow.workflowId;
+  const stepSlug = step.stepId;
+  const { editorValue, setEditorValue, previewStep, previewData, isPreviewPending } = useEditorPreview({
+    workflowSlug,
+    stepSlug,
+    controlValues: formValues,
+  });
+  const [accordionValue, setAccordionValue] = useState<string | undefined>(getInitialAccordionValue(editorValue));
+  const [payloadError, setPayloadError] = useState('');
+  const [height, setHeight] = useState(0);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setAccordionValue(getInitialAccordionValue(editorValue));
+  }, [editorValue]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (contentRef.current) {
+        const rect = contentRef.current.getBoundingClientRect();
+        setHeight(rect.height);
+      }
+    }, 0);
+
+    return () => clearTimeout(timeout);
+  }, [editorValue]);
+
+  return (
+    <PushTabsSection>
+      <div className="relative flex flex-col gap-3">
+        <div className="flex items-center gap-2.5 pb-2 text-sm font-medium">
+          <RiCellphoneFill className="size-3" />
+          <span>Push template editor</span>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-4">
+          <PushPreview isPreviewPending={isPreviewPending} previewData={previewData} />
+          <div className="flex w-full items-center gap-3 rounded-md border border-neutral-100 bg-neutral-50 px-3 py-2.5">
+            <span className="w-1 self-stretch rounded-full bg-neutral-500" />
+            <span className="flex-1 text-xs font-medium text-neutral-600">
+              This preview shows how your message will appear on mobile. Actual rendering may vary by device.
+            </span>
+          </div>
+        </div>
+        <Accordion type="single" collapsible value={accordionValue} onValueChange={setAccordionValue}>
+          <AccordionItem value="payload">
+            <AccordionTrigger>
+              <div className="flex items-center gap-1">
+                <Code2 className="size-5" />
+                Configure preview
+              </div>
+            </AccordionTrigger>
+            <AccordionContent
+              ref={contentRef}
+              className="flex flex-col gap-2"
+              style={{ '--radix-collapsible-content-height': `${height}px` } as CSSProperties}
+            >
+              <Editor
+                value={editorValue}
+                onChange={setEditorValue}
+                lang="json"
+                extensions={extensions}
+                className="border-neutral-alpha-200 bg-background text-foreground-600 mx-0 mt-0 rounded-lg border border-dashed p-3"
+              />
+              {payloadError && <p className="text-destructive text-xs">{payloadError}</p>}
+              <Button
+                size="xs"
+                type="button"
+                variant="outline"
+                className="self-end"
+                onClick={() => {
+                  try {
+                    previewStep();
+                    setPayloadError('');
+                  } catch (e) {
+                    setPayloadError(String(e));
+                  }
+                }}
+              >
+                Apply
+              </Button>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </PushTabsSection>
+  );
+};

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

@@ -0,0 +1,129 @@
+import { HTMLAttributes } from 'react';
+import { HTMLMotionProps, motion } from 'motion/react';
+import { ChannelTypeEnum, GeneratePreviewResponseDto } from '@novu/shared';
+import { Skeleton } from '@/components/primitives/skeleton';
+import { cn } from '@/utils/ui';
+
+export function PushPreview({
+  isPreviewPending,
+  previewData,
+}: {
+  isPreviewPending: boolean;
+  previewData?: GeneratePreviewResponseDto;
+}) {
+  if (isPreviewPending) {
+    return (
+      <PushBackgroundWithPhone>
+        <PushNotificationContainer>
+          <PushContentContainerPreview className="relative z-10">
+            <PushSubjectPreview isPending />
+            <PushBodyPreview isPending />
+          </PushContentContainerPreview>
+        </PushNotificationContainer>
+      </PushBackgroundWithPhone>
+    );
+  }
+
+  if (previewData?.result.type !== ChannelTypeEnum.PUSH) {
+    return (
+      <PushBackgroundWithPhone>
+        <PushNotificationContainer>
+          <PushContentContainerPreview className="border-destructive/40 relative z-10 h-10 justify-center border border-dashed">
+            <PushBodyPreview
+              body="No preview available"
+              isPending={isPreviewPending}
+              className="w-full justify-center"
+            />
+          </PushContentContainerPreview>
+        </PushNotificationContainer>
+      </PushBackgroundWithPhone>
+    );
+  }
+
+  return (
+    <PushBackgroundWithPhone>
+      <PushNotificationContainer>
+        <PushContentContainerPreview className="relative z-10">
+          <PushSubjectPreview subject={previewData.result.preview.subject} isPending={isPreviewPending} />
+          <PushBodyPreview body={previewData.result.preview.body} isPending={isPreviewPending} />
+        </PushContentContainerPreview>
+        <PushContentContainerPreview className="-mt-5 h-6 scale-95" />
+        <PushContentContainerPreview className="-mt-5 h-6 scale-90" />
+      </PushNotificationContainer>
+    </PushBackgroundWithPhone>
+  );
+}
+
+type PushSubjectPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  subject?: string;
+  isPending: boolean;
+};
+export const PushSubjectPreview = ({ subject, isPending, className, ...rest }: PushSubjectPreviewProps) => {
+  if (isPending) {
+    return <Skeleton className="h-3 w-2/3" />;
+  }
+
+  return (
+    <div className={cn('flex items-center gap-1.5', className)} {...rest}>
+      <div className="flex-1">
+        <span className="line-clamp-1 text-xs font-medium">{subject}</span>
+      </div>
+      <span className="text-2xs text-neutral-500">now</span>
+    </div>
+  );
+};
+
+type PushBodyPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  body?: string;
+  isPending: boolean;
+};
+export const PushBodyPreview = ({ body, isPending, className, ...rest }: PushBodyPreviewProps) => {
+  if (isPending) {
+    return (
+      <div className="flex flex-col gap-1" {...rest}>
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-2/3" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex items-center', className)} {...rest}>
+      <span className="text-2xs line-clamp-3">{body}</span>
+    </div>
+  );
+};
+
+export const PushContentContainerPreview = ({ children, className, ...rest }: HTMLMotionProps<'div'>) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: 'easeOut' }}
+      className={cn('flex w-full flex-col gap-0.5 rounded-md bg-neutral-50 p-1.5', className)}
+      layout
+      {...rest}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export const PushBackgroundWithPhone = ({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn("relative h-60 w-full max-w-72 bg-[url('/images/phones/iphone-push.svg')] bg-cover", className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const PushNotificationContainer = ({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={cn('absolute bottom-5 left-1/2 z-10 w-11/12 -translate-x-1/2 p-2', className)} {...rest}>
+      {children}
+    </div>
+  );
+};

apps/dashboard/src/components/workflow-editor/steps/push/push-tabs.tsx

@@ -4,12 +4,14 @@ import { StepEditorProps } from '@/components/workflow-editor/steps/configure-st
 import { PushEditor } from '@/components/workflow-editor/steps/push/push-editor';
 import { CustomStepControls } from '../controls/custom-step-controls';
 import { TemplateTabs } from '../template-tabs';
+import { PushEditorPreview } from './push-editor-preview';
+import { useFormContext } from 'react-hook-form';
 
 export const PushTabs = (props: StepEditorProps) => {
   const { workflow, step } = props;
   const { dataSchema, uiSchema } = step.controls;
   const [tabsValue, setTabsValue] = useState('editor');
-
+  const form = useFormContext();
   const isNovuCloud = workflow.origin === WorkflowOriginEnum.NOVU_CLOUD && uiSchema;
   const isExternal = workflow.origin === WorkflowOriginEnum.EXTERNAL;
 
@@ -20,7 +22,7 @@ export const PushTabs = (props: StepEditorProps) => {
     </>
   );
 
-  const previewContent = <>TODO</>;
+  const previewContent = <PushEditorPreview workflow={workflow} step={step} formValues={form.getValues()} />;
 
   return (
     <TemplateTabs