feat(dashboard): use preview schema in preview sections

Author: ChmaraX

apps/dashboard/src/components/preview-context-section.tsx

@@ -14,6 +14,7 @@ import { ContextSectionProps } from './workflow-editor/steps/types/preview-conte
 export function PreviewContextSection({
   error,
   context,
+  schema,
   onUpdate,
   onContextSelect,
   onClearPersisted,
@@ -125,6 +126,7 @@ export function PreviewContextSection({
             value={displayValue}
             onChange={handleContextChange}
             className={ACCORDION_STYLES.jsonViewer}
+            schema={schema}
           />
           {error && <p className="text-destructive text-xs">{error}</p>}
         </div>

apps/dashboard/src/components/preview-subscriber-section.tsx

@@ -12,6 +12,7 @@ import { SubscriberSectionProps } from './workflow-editor/steps/types/preview-co
 export function PreviewSubscriberSection({
   error,
   subscriber,
+  schema,
   onUpdate,
   onSubscriberSelect,
   onClearPersisted,
@@ -75,6 +76,7 @@ export function PreviewSubscriberSection({
           <EditableJsonViewer
             value={subscriber}
             onChange={(updatedData) => onUpdate('subscriber', updatedData)}
+            schema={schema}
             className={ACCORDION_STYLES.jsonViewer}
           />
           {error && <p className="text-destructive text-xs">{error}</p>}

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

@@ -12,6 +12,7 @@ export function PreviewPayloadSection({
   errors,
   localParsedData,
   workflow,
+  schema,
   onUpdate,
   onClearPersisted,
   hasDigestStep,
@@ -64,7 +65,7 @@ export function PreviewPayloadSection({
           <EditableJsonViewer
             value={localParsedData.payload}
             onChange={(updatedData) => onUpdate('payload', updatedData)}
-            schema={workflow?.payloadSchema}
+            schema={schema}
             className={ACCORDION_STYLES.jsonViewer}
           />
           {errors.payload && <p className="text-destructive text-xs">{errors.payload}</p>}

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

@@ -1,10 +1,12 @@
 import { FeatureFlagsKeysEnum, ISubscriberResponseDto } from '@novu/shared';
+import { JSONSchema7 } from 'json-schema';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { type ContextResponseDto } from '@/api/contexts';
 import { Accordion } from '@/components/primitives/accordion';
 import { useCreateVariable } from '@/components/variable/hooks/use-create-variable';
 import { useEnvironment } from '@/context/environment/hooks';
 import { useDefaultSubscriberData } from '@/hooks/use-default-subscriber-data';
+import { useDynamicPreviewSchema } from '@/hooks/use-dynamic-preview-schema';
 import { useFeatureFlag } from '@/hooks/use-feature-flag';
 import { useFetchOrganizationSettings } from '@/hooks/use-fetch-organization-settings';
 import { useIsPayloadSchemaEnabled } from '@/hooks/use-is-payload-schema-enabled';
@@ -101,6 +103,17 @@ export function PreviewContextPanel({
   const { isPayloadSchemaDrawerOpen, highlightedVariableKey, openSchemaDrawer, closeSchemaDrawer } =
     useCreateVariable();
 
+  const previewSchema = useDynamicPreviewSchema();
+  const schemas = useMemo(
+    () => ({
+      payload: workflow?.payloadSchema,
+      subscriber: previewSchema?.properties?.subscriber as JSONSchema7 | undefined,
+      context: previewSchema?.properties?.context as JSONSchema7 | undefined,
+      steps: previewSchema?.properties?.steps as JSONSchema7 | undefined,
+    }),
+    [previewSchema, workflow?.payloadSchema]
+  );
+
   const hasDigestStep = useMemo(() => {
     return workflow?.steps?.some((step) => step.type === StepTypeEnum.DIGEST) ?? false;
   }, [workflow?.steps]);
@@ -249,6 +262,7 @@ export function PreviewContextPanel({
           errors={errors}
           localParsedData={localParsedData}
           workflow={workflow}
+          schema={schemas.payload}
           onUpdate={updateJsonSection}
           onClearPersisted={canClearPersisted ? handleClearPersistedPayload : undefined}
           hasDigestStep={hasDigestStep}
@@ -258,7 +272,7 @@ export function PreviewContextPanel({
         <PreviewSubscriberSection
           error={errors.subscriber}
           subscriber={localParsedData.subscriber}
-          workflow={workflow}
+          schema={schemas.subscriber}
           onUpdate={updateJsonSection}
           onSubscriberSelect={handleSubscriberSelection}
           onClearPersisted={canClearPersisted ? handleClearPersistedSubscriber : undefined}
@@ -276,7 +290,7 @@ export function PreviewContextPanel({
           <PreviewContextSection
             error={errors.context}
             context={localParsedData.context}
-            workflow={workflow}
+            schema={schemas.context}
             onUpdate={updateJsonSection}
             onContextSelect={handleContextSelection}
             onClearPersisted={canClearPersisted ? handleClearPersistedContext : undefined}

apps/dashboard/src/components/workflow-editor/steps/types/preview-context.types.ts

@@ -1,4 +1,5 @@
 import { ContextPayload, ISubscriberResponseDto, SubscriberDto, WorkflowResponseDto } from '@novu/shared';
+import { JSONSchema7 } from 'json-schema';
 import { type ContextResponseDto } from '@/api/contexts';
 
 export type PayloadData = Record<string, unknown>;
@@ -37,6 +38,7 @@ export type AccordionSectionProps = {
 };
 
 export type PayloadSectionProps = AccordionSectionProps & {
+  schema?: JSONSchema7;
   onClearPersisted?: () => void;
   hasDigestStep?: boolean;
 };
@@ -48,6 +50,7 @@ export type StepResultsSectionProps = AccordionSectionProps & {
 export type SubscriberSectionProps = Omit<AccordionSectionProps, 'errors' | 'localParsedData' | 'onUpdate'> & {
   error: string | null;
   subscriber: Partial<SubscriberDto>;
+  schema?: JSONSchema7;
   onUpdate: (section: 'subscriber', data: PreviewSubscriberData) => void;
   onSubscriberSelect: (subscriber: ISubscriberResponseDto) => void;
   onClearPersisted?: () => void;
@@ -56,6 +59,7 @@ export type SubscriberSectionProps = Omit<AccordionSectionProps, 'errors' | 'loc
 export type ContextSectionProps = Omit<AccordionSectionProps, 'errors' | 'localParsedData' | 'onUpdate'> & {
   error: string | null;
   context: ContextPayload;
+  schema?: JSONSchema7;
   onUpdate: (section: 'context', data: ContextPayload) => void;
   onContextSelect: (context: ContextResponseDto) => void;
   onClearPersisted?: () => void;