@inspirer-dev/crm-dashboard 1.0.23 → 1.0.24

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

@@ -51,12 +51,16 @@ export const CHANNEL_OPTIONS: { value: ChannelType; label: string }[] = [
   { value: 'sms', label: 'SMS' },
 ];
 
+export const CHANNELS = CHANNEL_OPTIONS;
+
 export const DURATION_UNIT_OPTIONS: { value: DurationUnit; label: string }[] = [
   { value: 'minutes', label: 'Minutes' },
   { value: 'hours', label: 'Hours' },
   { value: 'days', label: 'Days' },
 ];
 
+export const DURATION_UNITS = DURATION_UNIT_OPTIONS;
+
 export const DEFAULT_NODE_DATA: Record<StepType, { name: string; config: object }> = {
   entry: {
     name: 'Entry',
@@ -89,3 +93,19 @@ export const DEFAULT_NODE_DATA: Record<StepType, { name: string; config: object
 };
 
 export const ENTRY_NODE_ID = 'entry';
+
+export const DEFAULT_STEP_CONFIG: Record<StepType, object> = {
+  entry: {},
+  message: {
+    channel: 'telegram' as ChannelType,
+    variants: [],
+  },
+  wait: {
+    duration: 1,
+    durationUnit: 'hours' as DurationUnit,
+  },
+  branch: {
+    branchSegmentId: undefined,
+  },
+  exit: {},
+};

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

@@ -0,0 +1,285 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactFlow, {
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  type Connection,
+  type OnNodesChange,
+  type OnEdgesChange,
+  type OnConnect,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import { Box } from '@strapi/design-system';
+
+import type { FlowNode, FlowEdge, FlowNodeData, FlowStep, StepType } from '../types';
+import { nodeTypes } from '../nodes';
+import { edgeTypes } from '../edges';
+import { NodeEditPanel } from '../panels';
+import { FlowToolbar } from '../toolbar';
+import {
+  stepsToFlow,
+  flowToSteps,
+  applyAutoLayout,
+  createNode,
+  getNextNodePosition,
+  isValidConnection,
+} from '../utils';
+import { ENTRY_NODE_ID } from '../constants';
+
+interface FlowCanvasProps {
+  steps: FlowStep[];
+  onStepsChange: (steps: FlowStep[]) => void;
+  disabled?: boolean;
+  error?: string;
+}
+
+const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled, error }) => {
+  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>('');
+
+  useEffect(() => {
+    const stepsJson = JSON.stringify(steps);
+    if (stepsJson === lastStepsRef.current) return;
+    lastStepsRef.current = stepsJson;
+
+    const { nodes: n, edges: e } = stepsToFlow(steps);
+
+    if (n.length === 0) {
+      const entryNode = createNode('entry', { x: 250, y: 0 });
+      setNodes([entryNode]);
+      setEdges([]);
+    } else {
+      const layoutedNodes = applyAutoLayout(n, e);
+      setNodes(layoutedNodes);
+      setEdges(e);
+    }
+    isInitialMount.current = false;
+  }, [steps, setNodes, setEdges]);
+
+  const syncToParent = useCallback(() => {
+    if (isInitialMount.current) return;
+
+    if (syncTimeoutRef.current) {
+      clearTimeout(syncTimeoutRef.current);
+    }
+
+    syncTimeoutRef.current = setTimeout(() => {
+      const newSteps = flowToSteps(nodes, edges);
+      const newStepsJson = JSON.stringify(newSteps);
+      if (newStepsJson !== lastStepsRef.current) {
+        lastStepsRef.current = newStepsJson;
+        onStepsChange(newSteps);
+      }
+    }, 300);
+  }, [nodes, edges, onStepsChange]);
+
+  useEffect(() => {
+    syncToParent();
+  }, [nodes, edges, syncToParent]);
+
+  useEffect(() => {
+    return () => {
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleNodesChange: OnNodesChange = useCallback(
+    (changes) => {
+      const filteredChanges = changes.filter((change) => {
+        if (change.type === 'remove' && change.id === ENTRY_NODE_ID) {
+          return false;
+        }
+        return true;
+      });
+      onNodesChange(filteredChanges);
+    },
+    [onNodesChange]
+  );
+
+  const handleEdgesChange: OnEdgesChange = useCallback(
+    (changes) => {
+      onEdgesChange(changes);
+    },
+    [onEdgesChange]
+  );
+
+  const handleConnect: OnConnect = useCallback(
+    (connection: Connection) => {
+      if (!connection.source || !connection.target) return;
+
+      if (
+        !isValidConnection(
+          connection.source,
+          connection.sourceHandle || null,
+          connection.target,
+          nodes,
+          edges
+        )
+      ) {
+        return;
+      }
+
+      const sourceNode = nodes.find((n) => n.id === connection.source);
+      const isBranch = sourceNode?.data.stepType === 'branch';
+
+      const newEdge: FlowEdge = {
+        id: `${connection.source}-${connection.target}${
+          connection.sourceHandle ? `-${connection.sourceHandle}` : ''
+        }`,
+        source: connection.source,
+        target: connection.target,
+        sourceHandle: connection.sourceHandle || undefined,
+        targetHandle: connection.targetHandle || undefined,
+        type: isBranch ? 'labeled' : 'default',
+      };
+
+      setEdges((eds) => addEdge(newEdge, eds));
+    },
+    [nodes, edges, setEdges]
+  );
+
+  const handleNodeClick = useCallback((_: React.MouseEvent, node: FlowNode) => {
+    setSelectedNode(node);
+  }, []);
+
+  const handlePaneClick = useCallback(() => {
+    setSelectedNode(null);
+  }, []);
+
+  const handleAddNode = useCallback(
+    (type: StepType) => {
+      const position = getNextNodePosition(nodes);
+      const newNode = createNode(type, position);
+      setNodes((nds) => [...nds, newNode]);
+    },
+    [nodes, setNodes]
+  );
+
+  const handleAutoLayout = useCallback(() => {
+    const layoutedNodes = applyAutoLayout(nodes, edges);
+    setNodes(layoutedNodes);
+  }, [nodes, edges, setNodes]);
+
+  const handleNodeUpdate = useCallback(
+    (nodeId: string, data: Partial<FlowNodeData>) => {
+      setNodes((nds) =>
+        nds.map((node) => {
+          if (node.id === nodeId) {
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                ...data,
+                config: {
+                  ...node.data.config,
+                  ...(data.config || {}),
+                },
+              },
+            };
+          }
+          return node;
+        })
+      );
+
+      if (selectedNode && selectedNode.id === nodeId) {
+        setSelectedNode((prev) =>
+          prev
+            ? {
+                ...prev,
+                data: {
+                  ...prev.data,
+                  ...data,
+                  config: {
+                    ...prev.data.config,
+                    ...(data.config || {}),
+                  },
+                },
+              }
+            : null
+        );
+      }
+    },
+    [selectedNode, setNodes]
+  );
+
+  const handleClosePanel = useCallback(() => {
+    setSelectedNode(null);
+  }, []);
+
+  return (
+    <Box
+      style={{
+        height: '100%',
+        border: error ? '1px solid #ee5e52' : '1px solid #dcdce4',
+        borderRadius: 4,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={handleNodesChange}
+        onEdgesChange={handleEdgesChange}
+        onConnect={handleConnect}
+        onNodeClick={handleNodeClick}
+        onPaneClick={handlePaneClick}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        deleteKeyCode={['Backspace', 'Delete']}
+        nodesDraggable={!disabled}
+        nodesConnectable={!disabled}
+        elementsSelectable={!disabled}
+        panOnScroll
+        selectionOnDrag
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+          animated: false,
+        }}
+      >
+        <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} />
+      </ReactFlow>
+      <NodeEditPanel
+        node={selectedNode}
+        onClose={handleClosePanel}
+        onUpdate={handleNodeUpdate}
+        disabled={disabled}
+      />
+    </Box>
+  );
+};
+
+export default FlowCanvas;

package/admin/src/components/StepFlowBuilder/flow-canvas/index.ts

@@ -0,0 +1 @@
+export { default as FlowCanvas } from './FlowCanvas';

package/admin/src/components/StepFlowBuilder/form-builder/FormBuilder.tsx

@@ -0,0 +1,198 @@
+import React, { useCallback } from 'react';
+import {
+  Box,
+  Flex,
+  Typography,
+  Button,
+  SingleSelect,
+  SingleSelectOption,
+  EmptyStateLayout,
+} from '@strapi/design-system';
+import { Plus, Message, Clock, ArrowRight, Cross } from '@strapi/icons';
+import type { FlowStep, StepType } from '../types';
+import { NODE_COLORS, STEP_TYPE_LABELS, DEFAULT_STEP_CONFIG } from '../constants';
+import { generateStepKey } from '../utils';
+import StepFormItem from './StepFormItem';
+
+interface FormBuilderProps {
+  steps: FlowStep[];
+  onStepsChange: (steps: FlowStep[]) => void;
+  disabled?: boolean;
+}
+
+const STEP_TYPE_OPTIONS: { type: StepType; label: string; icon: React.ReactNode }[] = [
+  { type: 'message', label: 'Message', icon: <Message style={{ width: 16, height: 16 }} /> },
+  { type: 'wait', label: 'Wait', icon: <Clock style={{ width: 16, height: 16 }} /> },
+  { type: 'branch', label: 'Branch', icon: <ArrowRight style={{ width: 16, height: 16 }} /> },
+  { type: 'exit', label: 'Exit', icon: <Cross style={{ width: 16, height: 16 }} /> },
+];
+
+const FormBuilder: React.FC<FormBuilderProps> = ({ steps, onStepsChange, disabled }) => {
+  const handleAddStep = useCallback(
+    (type: StepType) => {
+      const stepKey = generateStepKey();
+      const defaultConfig = DEFAULT_STEP_CONFIG[type];
+      const newStep: FlowStep = {
+        stepKey,
+        name: `${STEP_TYPE_LABELS[type]} ${steps.length + 1}`,
+        stepType: type,
+        order: steps.length,
+        ...defaultConfig,
+      };
+
+      const updatedSteps = [...steps, newStep];
+
+      if (steps.length > 0) {
+        const lastStep = steps[steps.length - 1];
+        if (lastStep.stepType !== 'branch' && lastStep.stepType !== 'exit' && !lastStep.nextStep) {
+          updatedSteps[steps.length - 1] = {
+            ...lastStep,
+            nextStep: stepKey,
+          };
+        }
+      }
+
+      onStepsChange(updatedSteps);
+    },
+    [steps, onStepsChange]
+  );
+
+  const handleUpdateStep = useCallback(
+    (stepKey: string, updates: Partial<FlowStep>) => {
+      const updatedSteps = steps.map((step) =>
+        step.stepKey === stepKey ? { ...step, ...updates } : step
+      );
+      onStepsChange(updatedSteps);
+    },
+    [steps, onStepsChange]
+  );
+
+  const handleDeleteStep = useCallback(
+    (stepKey: string) => {
+      const updatedSteps = steps
+        .filter((step) => step.stepKey !== stepKey)
+        .map((step, idx) => {
+          const updated = { ...step, order: idx };
+          if (step.nextStep === stepKey) {
+            updated.nextStep = undefined;
+          }
+          if (step.yesNextStep === stepKey) {
+            updated.yesNextStep = undefined;
+          }
+          if (step.noNextStep === stepKey) {
+            updated.noNextStep = undefined;
+          }
+          return updated;
+        });
+      onStepsChange(updatedSteps);
+    },
+    [steps, onStepsChange]
+  );
+
+  const handleMoveStep = useCallback(
+    (stepKey: string, direction: 'up' | 'down') => {
+      const currentIndex = steps.findIndex((s) => s.stepKey === stepKey);
+      if (currentIndex === -1) return;
+
+      const newIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
+      if (newIndex < 0 || newIndex >= steps.length) return;
+
+      const updatedSteps = [...steps];
+      const [moved] = updatedSteps.splice(currentIndex, 1);
+      updatedSteps.splice(newIndex, 0, moved);
+
+      const reordered = updatedSteps.map((step, idx) => ({
+        ...step,
+        order: idx,
+      }));
+
+      onStepsChange(reordered);
+    },
+    [steps, onStepsChange]
+  );
+
+  return (
+    <Box>
+      <Box padding={3} background="neutral100" hasRadius style={{ marginBottom: 16 }}>
+        <Flex justifyContent="space-between" alignItems="center" wrap="wrap" gap={2}>
+          <Typography variant="sigma" textColor="neutral600">
+            Add Step:
+          </Typography>
+          <Flex gap={2} wrap="wrap">
+            {STEP_TYPE_OPTIONS.map((option) => {
+              const colors = NODE_COLORS[option.type];
+              return (
+                <Button
+                  key={option.type}
+                  variant="tertiary"
+                  size="S"
+                  startIcon={option.icon}
+                  onClick={() => handleAddStep(option.type)}
+                  disabled={disabled}
+                  style={{
+                    backgroundColor: colors.background,
+                    color: colors.text,
+                    borderColor: colors.border,
+                  }}
+                >
+                  {option.label}
+                </Button>
+              );
+            })}
+          </Flex>
+        </Flex>
+      </Box>
+
+      {steps.length === 0 ? (
+        <Box padding={6} background="neutral100" hasRadius>
+          <EmptyStateLayout
+            icon={<Message style={{ width: 48, height: 48, color: '#666687' }} />}
+            content="No steps configured yet. Add your first step to build the campaign journey."
+            action={
+              <Button
+                variant="secondary"
+                startIcon={<Plus />}
+                onClick={() => handleAddStep('message')}
+                disabled={disabled}
+              >
+                Add Message Step
+              </Button>
+            }
+          />
+        </Box>
+      ) : (
+        <Flex direction="column" gap={3}>
+          {steps.map((step, index) => (
+            <StepFormItem
+              key={step.stepKey}
+              step={step}
+              index={index}
+              steps={steps}
+              onUpdate={handleUpdateStep}
+              onDelete={handleDeleteStep}
+              onMove={handleMoveStep}
+              disabled={disabled}
+            />
+          ))}
+        </Flex>
+      )}
+
+      {steps.length > 0 && (
+        <Box paddingTop={4}>
+          <Flex justifyContent="center">
+            <Button
+              variant="tertiary"
+              startIcon={<Plus />}
+              onClick={() => handleAddStep('message')}
+              disabled={disabled}
+            >
+              Add Another Step
+            </Button>
+          </Flex>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default FormBuilder;