@inspirer-dev/crm-dashboard 1.0.40 → 1.0.41

package/admin/src/components/StepFlowBuilder/constants.ts

@@ -56,11 +56,11 @@ export const NODE_COLORS: Record<
 export const EDGE_COLORS = {
   default: {
     stroke: '#94a3b8',
-    strokeWidth: 2,
+    strokeWidth: 3,
   },
   yes: {
     stroke: '#10b981',
-    strokeWidth: 2,
+    strokeWidth: 3,
     label: {
       background: '#d1fae5',
       text: '#059669',
@@ -69,7 +69,7 @@ export const EDGE_COLORS = {
   },
   no: {
     stroke: '#ef4444',
-    strokeWidth: 2,
+    strokeWidth: 3,
     label: {
       background: '#fee2e2',
       text: '#dc2626',
@@ -83,6 +83,8 @@ export const NODE_DIMENSIONS = {
   height: 88,
 };
 
+export const HANDLE_SIZE = 16;
+
 export const STEP_TYPE_LABELS: Record<StepType, string> = {
   entry: 'Entry Point',
   message: 'Send Message',

package/admin/src/components/StepFlowBuilder/context/ValidationContext.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react';
+import type { ValidationError } from '../validation';
+
+interface ValidationContextValue {
+  nodeErrors: Map<string, ValidationError[]>;
+}
+
+const ValidationContext = createContext<ValidationContextValue>({
+  nodeErrors: new Map(),
+});
+
+export const ValidationProvider: React.FC<{
+  nodeErrors: Map<string, ValidationError[]>;
+  children: React.ReactNode;
+}> = ({ nodeErrors, children }) => {
+  return (
+    <ValidationContext.Provider value={{ nodeErrors }}>
+      {children}
+    </ValidationContext.Provider>
+  );
+};
+
+export const useValidation = () => useContext(ValidationContext);
+
+export const useNodeValidation = (nodeId: string) => {
+  const { nodeErrors } = useValidation();
+  const errors = nodeErrors.get(nodeId) || [];
+  return {
+    hasError: errors.some((e) => e.severity === 'error'),
+    hasWarning: errors.some((e) => e.severity === 'warning'),
+    errors,
+  };
+};

package/admin/src/components/StepFlowBuilder/context/index.ts

@@ -0,0 +1 @@
+export { ValidationProvider, useValidation, useNodeValidation } from './ValidationContext';

package/admin/src/components/StepFlowBuilder/edges/LabeledEdge.tsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  getSmoothStepPath,
-  type EdgeProps,
-} from 'reactflow';
+import { BaseEdge, EdgeLabelRenderer, getSimpleBezierPath, type EdgeProps } from 'reactflow';
 import { EDGE_COLORS } from '../constants';
 
 interface LabeledEdgeData {
@@ -18,30 +13,29 @@ const LabeledEdge: React.FC<EdgeProps<LabeledEdgeData>> = ({
   targetY,
   sourcePosition,
   targetPosition,
-  sourceHandle,
+  sourceHandleId,
   style = {},
   markerEnd,
 }) => {
-  const [edgePath] = getSmoothStepPath({
+  const [edgePath] = getSimpleBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
     targetX,
     targetY,
     targetPosition,
-    borderRadius: 16,
   });
 
-  const isYes = sourceHandle === 'yes';
-  const isNo = sourceHandle === 'no';
+  const isYes = sourceHandleId === 'yes';
+  const isNo = sourceHandleId === 'no';
   const label = isYes ? 'YES' : isNo ? 'NO' : null;
 
   const edgeStyle = isYes ? EDGE_COLORS.yes : isNo ? EDGE_COLORS.no : EDGE_COLORS.default;
 
   const labelStyle = isYes ? EDGE_COLORS.yes.label : isNo ? EDGE_COLORS.no.label : null;
 
-  const labelPosX = sourceX;
-  const labelPosY = sourceY + 24;
+  const labelPosX = (sourceX + targetX) / 2;
+  const labelPosY = (sourceY + targetY) / 2;
 
   return (
     <>

package/admin/src/components/StepFlowBuilder/flow-canvas/FlowCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import ReactFlow, {
   Background,
   Controls,
@@ -17,10 +17,17 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import { Box } from '@strapi/design-system';
 
-import type { FlowNode, FlowEdge, FlowNodeData, FlowStep, StepType, CampaignContext } from '../types';
+import type {
+  FlowNode,
+  FlowEdge,
+  FlowNodeData,
+  FlowStep,
+  StepType,
+  CampaignContext,
+} from '../types';
 import { nodeTypes } from '../nodes';
 import { edgeTypes } from '../edges';
-import { NodeEditPanel } from '../panels';
+import { NodeEditPanel, ValidationPanel } from '../panels';
 import { FlowToolbar } from '../toolbar';
 import {
   stepsToFlow,
@@ -31,32 +38,53 @@ import {
   isValidConnection,
 } from '../utils';
 import { ENTRY_NODE_ID, PROXIMITY_THRESHOLD, NODE_DIMENSIONS } from '../constants';
+import { validateFlow, type ValidationResult } from '../validation';
+import { ValidationProvider } from '../context/ValidationContext';
 
 interface FlowCanvasProps {
   steps: FlowStep[];
   onStepsChange: (steps: FlowStep[]) => void;
+  onValidationChange?: (validation: ValidationResult) => void;
   disabled?: boolean;
   error?: string;
   campaignContext?: CampaignContext;
 }
 
-const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled, error, campaignContext }) => {
+const FlowCanvas: React.FC<FlowCanvasProps> = ({
+  steps,
+  onStepsChange,
+  onValidationChange,
+  disabled,
+  error,
+  campaignContext,
+}) => {
   const [nodes, setNodes, onNodesChange] = useNodesState<FlowNodeData>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const [selectedNode, setSelectedNode] = useState<FlowNode | null>(null);
   const isInitialMount = useRef(true);
   const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastStepsRef = useRef<string>('');
-  const { fitView, getViewport, setViewport } = useReactFlow();
+  const { fitView, getViewport, setViewport, setCenter } = useReactFlow();
   const store = useStoreApi();
 
-  const fitViewWithTopPadding = useCallback((topOffset = 40) => {
-    fitView({ padding: 0.2, duration: 200 });
-    setTimeout(() => {
-      const { x, y, zoom } = getViewport();
-      setViewport({ x, y: y - topOffset, zoom }, { duration: 200 });
-    }, 210);
-  }, [fitView, getViewport, setViewport]);
+  const validation = useMemo(() => {
+    return validateFlow(nodes as FlowNode[], edges as FlowEdge[]);
+  }, [nodes, edges]);
+
+  useEffect(() => {
+    onValidationChange?.(validation);
+  }, [validation, onValidationChange]);
+
+  const fitViewWithTopPadding = useCallback(
+    (topOffset = 40) => {
+      fitView({ padding: 0.2, duration: 200 });
+      setTimeout(() => {
+        const { x, y, zoom } = getViewport();
+        setViewport({ x, y: y - topOffset, zoom }, { duration: 200 });
+      }, 210);
+    },
+    [fitView, getViewport, setViewport]
+  );
 
   const getNodeDistance = useCallback(
     (nodeId1: string, nodeId2: string) => {
@@ -86,7 +114,8 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled,
       if (!internalNode) return null;
 
       type NodeWithPosition = Node & { positionAbsolute?: { x: number; y: number } };
-      const draggedPos = (internalNode as NodeWithPosition).positionAbsolute || internalNode.position;
+      const draggedPos =
+        (internalNode as NodeWithPosition).positionAbsolute || internalNode.position;
 
       const closestNode = Array.from(nodeInternals.values()).reduce<{
         distance: number;
@@ -119,21 +148,45 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled,
       const draggedIsBelow = draggedPos.y > closestPos.y;
 
       if (draggedIsBelow) {
-        if (closestData.stepType === 'exit' || closestData.stepType === 'branch') {
+        if (closestData.stepType === 'exit') {
           return null;
         }
+        if (closestData.stepType === 'branch') {
+          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
+          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
+          const isRight = draggedCenterX >= closestCenterX;
+          const handle = isRight ? 'no' : 'yes';
+          return {
+            id: `${closestNode.node.id}-${node.id}-${handle}`,
+            source: closestNode.node.id,
+            sourceHandle: handle,
+            target: node.id,
+          };
+        }
         return {
           id: `${closestNode.node.id}-${node.id}`,
           source: closestNode.node.id,
           target: node.id,
         };
       } else {
-        if (draggedData.stepType === 'entry' || draggedData.stepType === 'branch') {
+        if (draggedData.stepType === 'entry') {
           return null;
         }
         if (closestData.stepType === 'entry') {
           return null;
         }
+        if (draggedData.stepType === 'branch') {
+          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
+          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
+          const isRight = closestCenterX >= draggedCenterX;
+          const handle = isRight ? 'no' : 'yes';
+          return {
+            id: `${node.id}-${closestNode.node.id}-${handle}`,
+            source: node.id,
+            sourceHandle: handle,
+            target: closestNode.node.id,
+          };
+        }
         return {
           id: `${node.id}-${closestNode.node.id}`,
           source: node.id,
@@ -162,13 +215,20 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled,
           return true;
         });
 
-        if (
-          closeEdge &&
-          !nextEdges.find(
-            (ne) => ne.source === closeEdge.source && ne.target === closeEdge.target
-          )
-        ) {
-          nextEdges.push({ ...closeEdge, className: 'temp' });
+        if (closeEdge) {
+          const isDuplicate = nextEdges.find(
+            (ne) =>
+              ne.source === closeEdge.source &&
+              ne.target === closeEdge.target &&
+              ne.sourceHandle === closeEdge.sourceHandle
+          );
+          if (!isDuplicate) {
+            nextEdges.push({
+              ...closeEdge,
+              className: 'temp',
+              type: closeEdge.sourceHandle ? 'labeled' : 'default',
+            });
+          }
         }
 
         return nextEdges;
@@ -195,13 +255,19 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled,
           return true;
         });
 
-        if (
-          closeEdge &&
-          !nextEdges.find(
-            (ne) => ne.source === closeEdge.source && ne.target === closeEdge.target
-          )
-        ) {
-          nextEdges.push(closeEdge);
+        if (closeEdge) {
+          const isDuplicate = nextEdges.find(
+            (ne) =>
+              ne.source === closeEdge.source &&
+              ne.target === closeEdge.target &&
+              ne.sourceHandle === closeEdge.sourceHandle
+          );
+          if (!isDuplicate) {
+            nextEdges.push({
+              ...closeEdge,
+              type: closeEdge.sourceHandle ? 'labeled' : 'default',
+            });
+          }
         }
 
         return nextEdges;
@@ -388,86 +454,116 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled,
     setSelectedNode(null);
   }, []);
 
+  const handleErrorClick = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (node) {
+        setSelectedNode(node as FlowNode);
+        setCenter(
+          node.position.x + NODE_DIMENSIONS.width / 2,
+          node.position.y + NODE_DIMENSIONS.height / 2,
+          { duration: 300, zoom: 1 }
+        );
+      }
+    },
+    [nodes, setCenter]
+  );
+
   return (
-    <Box
-      style={{
-        height: '100%',
-        width: '100%',
-        border: error ? '1px solid #ee5e52' : '1px solid #dcdce4',
-        borderRadius: 4,
-        overflow: 'hidden',
-        position: 'relative',
-      }}
-    >
-      <style>
-        {`
-          .react-flow__edge.temp .react-flow__edge-path {
-            stroke: #94a3b8;
-            stroke-dasharray: 5 5;
-            stroke-width: 2;
-          }
-          .react-flow__edge.temp {
-            pointer-events: none;
-          }
-        `}
-      </style>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={handleNodesChange}
-        onEdgesChange={handleEdgesChange}
-        onConnect={handleConnect}
-        onNodeClick={handleNodeClick}
-        onPaneClick={handlePaneClick}
-        onNodeDrag={disabled ? undefined : handleNodeDrag}
-        onNodeDragStop={disabled ? undefined : handleNodeDragStop}
-        fitView
-        fitViewOptions={{ padding: 0.2 }}
-        deleteKeyCode={['Backspace', 'Delete']}
-        nodesDraggable={!disabled}
-        nodesConnectable={!disabled}
-        elementsSelectable={!disabled}
-        panOnScroll
-        selectionOnDrag
-        defaultEdgeOptions={{
-          type: 'smoothstep',
-          animated: false,
+    <ValidationProvider nodeErrors={validation.nodeErrors}>
+      <Box
+        style={{
+          height: '100%',
+          width: '100%',
+          border: error ? '1px solid #ee5e52' : '1px solid #dcdce4',
+          borderRadius: 4,
+          overflow: 'hidden',
+          position: 'relative',
         }}
       >
-        <Background color="#f0f0f0" gap={20} />
-        <Controls showInteractive={false} />
-        <MiniMap
-          nodeColor={(node) => {
-            switch (node.data?.stepType) {
-              case 'entry':
-                return '#5cb176';
-              case 'message':
-                return '#0077cc';
-              case 'wait':
-                return '#e9b200';
-              case 'branch':
-                return '#7b61ff';
-              case 'exit':
-                return '#dc2626';
-              default:
-                return '#999';
+        <style>
+          {`
+            .react-flow__edge.temp .react-flow__edge-path {
+              stroke: #94a3b8;
+              stroke-dasharray: 5 5;
+              stroke-width: 3;
             }
+            .react-flow__edge.temp {
+              pointer-events: none;
+            }
+          `}
+        </style>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          onNodesChange={handleNodesChange}
+          onEdgesChange={handleEdgesChange}
+          onConnect={handleConnect}
+          onNodeClick={handleNodeClick}
+          onPaneClick={handlePaneClick}
+          onNodeDrag={disabled ? undefined : handleNodeDrag}
+          onNodeDragStop={disabled ? undefined : handleNodeDragStop}
+          fitView
+          fitViewOptions={{ padding: 0.2 }}
+          deleteKeyCode={['Backspace', 'Delete']}
+          nodesDraggable={!disabled}
+          nodesConnectable={!disabled}
+          elementsSelectable={!disabled}
+          panOnScroll
+          selectionOnDrag
+          defaultEdgeOptions={{
+            type: 'simplebezier',
+            animated: false,
+            style: {
+              stroke: '#94a3b8',
+              strokeWidth: 3,
+            },
           }}
-          maskColor="rgba(0, 0, 0, 0.1)"
-          style={{ background: '#f7f7f7' }}
+        >
+          <Background color="#f0f0f0" gap={20} />
+          <Controls showInteractive={false} />
+          <MiniMap
+            nodeColor={(node) => {
+              switch (node.data?.stepType) {
+                case 'entry':
+                  return '#5cb176';
+                case 'message':
+                  return '#0077cc';
+                case 'wait':
+                  return '#e9b200';
+                case 'branch':
+                  return '#7b61ff';
+                case 'exit':
+                  return '#dc2626';
+                default:
+                  return '#999';
+              }
+            }}
+            maskColor="rgba(0, 0, 0, 0.1)"
+            style={{ background: '#f7f7f7' }}
+          />
+          <FlowToolbar
+            onAddNode={handleAddNode}
+            onAutoLayout={handleAutoLayout}
+            disabled={disabled}
+          />
+          <ValidationPanel
+            validation={validation}
+            onErrorClick={handleErrorClick}
+          />
+        </ReactFlow>
+        <NodeEditPanel
+          node={selectedNode}
+          onClose={handleClosePanel}
+          onUpdate={handleNodeUpdate}
+          disabled={disabled}
+          campaignContext={campaignContext}
+          nodeErrors={selectedNode ? validation.nodeErrors.get(selectedNode.id) || [] : []}
         />
-        <FlowToolbar onAddNode={handleAddNode} onAutoLayout={handleAutoLayout} disabled={disabled} />
-      </ReactFlow>
-      <NodeEditPanel
-        node={selectedNode}
-        onClose={handleClosePanel}
-        onUpdate={handleNodeUpdate}
-        disabled={disabled}
-        campaignContext={campaignContext}
-      />
-    </Box>
+      </Box>
+    </ValidationProvider>
   );
 };
 

package/admin/src/components/StepFlowBuilder/index.tsx

@@ -5,6 +5,7 @@ import { Box, Field, Flex, Typography, Badge } from '@strapi/design-system';
 import { useForm, unstable_useContentManagerContext as useContentManagerContext } from '@strapi/strapi/admin';
 
 import type { StepFlowBuilderProps, FlowStep, CampaignContext, EntrySegment } from './types';
+import type { ValidationResult } from './validation';
 import { parseValue } from './utils';
 import { FlowCanvas } from './flow-canvas';
 
@@ -12,10 +13,11 @@ type SegmentItem = { id?: number; documentId?: string; name?: string };
 type ConnectDisconnect = { connect?: SegmentItem[]; disconnect?: SegmentItem[] };
 
 const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
-  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+  ({ name, value, onChange, intlLabel, disabled, error: externalError, required, hint }, ref) => {
     const [steps, setSteps] = useState<FlowStep[]>([]);
     const [initialSegment, setInitialSegment] = useState<EntrySegment | null>(null);
     const [hasFetched, setHasFetched] = useState(false);
+    const [validation, setValidation] = useState<ValidationResult | null>(null);
     const isInitialMount = useRef(true);
     const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -27,28 +29,23 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
       const ctx = useContentManagerContext();
       documentId = ctx?.id;
       model = ctx?.model;
-      console.log('[StepFlowBuilder] ContentManagerContext:', { documentId, model });
     } catch (err) {
-      console.log('[StepFlowBuilder] No ContentManagerContext (test page?)');
+      // No ContentManagerContext (test page?)
     }
 
     useEffect(() => {
       if (!documentId || !model || hasFetched) {
-        console.log('[StepFlowBuilder] Skip fetch:', { documentId, model, hasFetched });
         return;
       }
 
       const fetchCampaignData = async () => {
-        console.log('[StepFlowBuilder] Fetching campaign data...');
         try {
           const { useFetchClient } = await import('@strapi/strapi/admin');
           const { get } = useFetchClient();
 
           const url = `/content-manager/collection-types/${model}/${documentId}`;
-          console.log('[StepFlowBuilder] Fetch URL:', url);
 
           const response = await get(url, { params: { populate: 'entrySegment' } });
-          console.log('[StepFlowBuilder] Campaign response:', response);
 
           const data = response?.data as { entrySegment?: { id: number; name: string } } | undefined;
           if (data?.entrySegment?.id) {
@@ -56,10 +53,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
               id: data.entrySegment.id,
               name: data.entrySegment.name || `Segment #${data.entrySegment.id}`,
             };
-            console.log('[StepFlowBuilder] Initial segment from API:', seg);
             setInitialSegment(seg);
-          } else {
-            console.log('[StepFlowBuilder] No entrySegment in response');
           }
         } catch (err) {
           console.error('[StepFlowBuilder] Fetch error:', err);
@@ -75,8 +69,6 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
       const values = form?.values as Record<string, unknown> | undefined;
       const entrySegmentValue = values?.entrySegment as ConnectDisconnect | undefined;
 
-      console.log('[StepFlowBuilder] form.values.entrySegment:', entrySegmentValue);
-
       if (!entrySegmentValue) {
         return initialSegment;
       }
@@ -85,14 +77,12 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
 
       if (connect.length > 0) {
         const seg = connect[0];
-        console.log('[StepFlowBuilder] Using connect segment:', seg);
         return { id: seg.id!, name: seg.name || `Segment #${seg.id}` };
       }
 
       if (disconnect.length > 0 && initialSegment) {
         const disconnectedId = disconnect[0]?.id;
         if (disconnectedId === initialSegment.id) {
-          console.log('[StepFlowBuilder] Segment disconnected');
           return null;
         }
       }
@@ -104,8 +94,6 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
       const values = form?.values as Record<string, unknown> | undefined;
       if (!values) return {};
 
-      console.log('[StepFlowBuilder] Final segment for context:', currentSegment);
-
       return {
         triggerConfig: values.triggerConfig as CampaignContext['triggerConfig'],
         entrySegment: currentSegment,
@@ -142,6 +130,10 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
       [syncToStrapi]
     );
 
+    const handleValidationChange = useCallback((newValidation: ValidationResult) => {
+      setValidation(newValidation);
+    }, []);
+
     useEffect(() => {
       return () => {
         if (syncTimeoutRef.current) {
@@ -159,12 +151,33 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
 
     const stepCount = steps.length;
 
+    const validationError = useMemo(() => {
+      if (!validation || validation.isValid) return null;
+      const errorCount = validation.errors.length;
+      const errorWord = errorCount === 1 ? 'ошибка' : errorCount < 5 ? 'ошибки' : 'ошибок';
+      return `Поток содержит ${errorCount} ${errorWord} валидации. Исправьте все ошибки перед публикацией.`;
+    }, [validation]);
+
+    const error = externalError || validationError;
+
     return (
       <Field.Root name={name} error={error} hint={hint} required={required}>
         <Flex justifyContent="space-between" alignItems="center" paddingBottom={2}>
-          <Field.Label>{displayLabel}</Field.Label>
+          <Flex gap={2} alignItems="center">
+            <Field.Label>{displayLabel}</Field.Label>
+            {validation && !validation.isValid && (
+              <Badge backgroundColor="danger100" textColor="danger600">
+                {validation.errors.length} {validation.errors.length === 1 ? 'ошибка' : validation.errors.length < 5 ? 'ошибки' : 'ошибок'}
+              </Badge>
+            )}
+            {validation && validation.isValid && validation.warnings.length > 0 && (
+              <Badge backgroundColor="warning100" textColor="warning600">
+                {validation.warnings.length} {validation.warnings.length === 1 ? 'предупр.' : 'предупр.'}
+              </Badge>
+            )}
+          </Flex>
           <Badge backgroundColor="neutral100" textColor="neutral600">
-            {stepCount} step{stepCount !== 1 ? 's' : ''}
+            {stepCount} {stepCount === 1 ? 'шаг' : stepCount < 5 ? 'шага' : 'шагов'}
           </Badge>
         </Flex>
 
@@ -172,8 +185,9 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
           <FlowCanvas
             steps={steps}
             onStepsChange={handleStepsChange}
+            onValidationChange={handleValidationChange}
             disabled={disabled}
-            error={error}
+            error={error || undefined}
             campaignContext={campaignContext}
           />
         </Box>