@inspirer-dev/crm-dashboard 1.0.21 → 1.0.22

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

@@ -0,0 +1,91 @@
+import type { StepType, ChannelType, DurationUnit } from './types';
+
+export const NODE_COLORS: Record<
+  StepType,
+  { background: string; border: string; text: string }
+> = {
+  entry: {
+    background: '#eef5eb',
+    border: '#5cb176',
+    text: '#297c3b',
+  },
+  message: {
+    background: '#eef8ff',
+    border: '#0077cc',
+    text: '#0055a4',
+  },
+  wait: {
+    background: '#fffae6',
+    border: '#e9b200',
+    text: '#a16207',
+  },
+  branch: {
+    background: '#f5f0ff',
+    border: '#7b61ff',
+    text: '#5746af',
+  },
+  exit: {
+    background: '#fef1f0',
+    border: '#dc2626',
+    text: '#c03030',
+  },
+};
+
+export const NODE_DIMENSIONS = {
+  width: 220,
+  height: 80,
+};
+
+export const STEP_TYPE_LABELS: Record<StepType, string> = {
+  entry: 'Entry Point',
+  message: 'Send Message',
+  wait: 'Wait',
+  branch: 'Branch',
+  exit: 'Exit',
+};
+
+export const CHANNEL_OPTIONS: { value: ChannelType; label: string }[] = [
+  { value: 'telegram', label: 'Telegram' },
+  { value: 'email', label: 'Email' },
+  { value: 'push', label: 'Push Notification' },
+  { value: 'sms', label: 'SMS' },
+];
+
+export const DURATION_UNIT_OPTIONS: { value: DurationUnit; label: string }[] = [
+  { value: 'minutes', label: 'Minutes' },
+  { value: 'hours', label: 'Hours' },
+  { value: 'days', label: 'Days' },
+];
+
+export const DEFAULT_NODE_DATA: Record<StepType, { name: string; config: object }> = {
+  entry: {
+    name: 'Entry',
+    config: {},
+  },
+  message: {
+    name: 'Send Message',
+    config: {
+      channel: 'telegram' as ChannelType,
+      variants: [],
+    },
+  },
+  wait: {
+    name: 'Wait',
+    config: {
+      duration: 1,
+      durationUnit: 'hours' as DurationUnit,
+    },
+  },
+  branch: {
+    name: 'Branch',
+    config: {
+      branchSegment: null,
+    },
+  },
+  exit: {
+    name: 'Exit',
+    config: {},
+  },
+};
+
+export const ENTRY_NODE_ID = 'entry';

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getBezierPath,
+  type EdgeProps,
+} from 'reactflow';
+
+interface LabeledEdgeData {
+  label?: string;
+}
+
+const LabeledEdge: React.FC<EdgeProps<LabeledEdgeData>> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  sourceHandle,
+  style = {},
+  markerEnd,
+}) => {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const isYes = sourceHandle === 'yes';
+  const isNo = sourceHandle === 'no';
+  const label = isYes ? 'Yes' : isNo ? 'No' : null;
+  const bgColor = isYes ? '#dcfce7' : isNo ? '#fef2f2' : '#fff';
+  const textColor = isYes ? '#15803d' : isNo ? '#dc2626' : '#333';
+  const borderColor = isYes ? '#86efac' : isNo ? '#fca5a5' : '#ddd';
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{
+          ...style,
+          stroke: isYes ? '#5cb176' : isNo ? '#dc2626' : '#b1b1b7',
+          strokeWidth: 2,
+        }}
+      />
+      {label && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+              fontSize: 11,
+              fontWeight: 600,
+              background: bgColor,
+              color: textColor,
+              padding: '2px 8px',
+              borderRadius: 4,
+              border: `1px solid ${borderColor}`,
+              pointerEvents: 'all',
+            }}
+            className="nodrag nopan"
+          >
+            {label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+};
+
+export default LabeledEdge;

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

@@ -0,0 +1,8 @@
+import type { EdgeTypes } from 'reactflow';
+import LabeledEdge from './LabeledEdge';
+
+export { LabeledEdge };
+
+export const edgeTypes: EdgeTypes = {
+  labeled: LabeledEdge,
+};

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

@@ -0,0 +1,320 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import ReactFlow, {
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  type Connection,
+  type OnNodesChange,
+  type OnEdgesChange,
+  type OnConnect,
+  ReactFlowProvider,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import { Box, Field, Flex, Typography, Badge } from '@strapi/design-system';
+
+import type { StepFlowBuilderProps, FlowNode, FlowEdge, FlowNodeData, StepType } from './types';
+import { nodeTypes } from './nodes';
+import { edgeTypes } from './edges';
+import { NodeEditPanel } from './panels';
+import { FlowToolbar } from './toolbar';
+import {
+  parseValue,
+  stepsToFlow,
+  flowToSteps,
+  applyAutoLayout,
+  createNode,
+  getNextNodePosition,
+  isValidConnection,
+} from './utils';
+import { ENTRY_NODE_ID } from './constants';
+
+const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    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);
+
+    useEffect(() => {
+      const steps = parseValue(value);
+      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;
+    }, []);
+
+    const syncToStrapi = useCallback(() => {
+      if (isInitialMount.current) return;
+
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current);
+      }
+
+      syncTimeoutRef.current = setTimeout(() => {
+        const steps = flowToSteps(nodes, edges);
+        const serialized = JSON.stringify(steps);
+        onChange({ target: { name, value: serialized } });
+      }, 300);
+    }, [nodes, edges, name, onChange]);
+
+    useEffect(() => {
+      syncToStrapi();
+    }, [nodes, edges, syncToStrapi]);
+
+    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);
+    }, []);
+
+    const displayLabel = useMemo(() => {
+      if (intlLabel?.defaultMessage && !intlLabel.defaultMessage.includes('.')) {
+        return intlLabel.defaultMessage;
+      }
+      return 'Campaign Steps';
+    }, [intlLabel]);
+
+    const stepCount = nodes.filter((n) => n.data.stepType !== 'entry').length;
+
+    return (
+      <Field.Root name={name} error={error} hint={hint} required={required}>
+        <Flex justifyContent="space-between" alignItems="center">
+          <Field.Label>{displayLabel}</Field.Label>
+          <Badge backgroundColor="neutral100" textColor="neutral600">
+            {stepCount} step{stepCount !== 1 ? 's' : ''}
+          </Badge>
+        </Flex>
+        <Box
+          paddingTop={2}
+          ref={ref}
+          style={{ position: 'relative', height: 600 }}
+        >
+          <Box
+            style={{
+              height: '100%',
+              border: error ? '1px solid #ee5e52' : '1px solid #dcdce4',
+              borderRadius: 4,
+              overflow: 'hidden',
+            }}
+          >
+            <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>
+        </Box>
+        <Field.Hint />
+        <Field.Error />
+      </Field.Root>
+    );
+  }
+);
+
+StepFlowBuilderInner.displayName = 'StepFlowBuilderInner';
+
+const StepFlowBuilder = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
+  (props, ref) => {
+    return (
+      <ReactFlowProvider>
+        <StepFlowBuilderInner {...props} ref={ref} />
+      </ReactFlowProvider>
+    );
+  }
+);
+
+StepFlowBuilder.displayName = 'StepFlowBuilder';
+
+export default StepFlowBuilder;

package/admin/src/components/StepFlowBuilder/nodes/BranchNode.tsx

@@ -0,0 +1,90 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from 'reactflow';
+import { Flex, Typography, Badge } from '@strapi/design-system';
+import { ArrowRight } from '@strapi/icons';
+import type { FlowNodeData } from '../types';
+import { NODE_COLORS, NODE_DIMENSIONS } from '../constants';
+
+const BranchNode: React.FC<NodeProps<FlowNodeData>> = ({ data, selected }) => {
+  const colors = NODE_COLORS.branch;
+  const segmentName = data.config.branchSegment?.name || 'No segment';
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+        }}
+      />
+      <Flex
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        gap={1}
+        padding={3}
+        background="neutral0"
+        hasRadius
+        style={{
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : 'none',
+        }}
+      >
+        <Flex alignItems="center" gap={2}>
+          <ArrowRight style={{ color: colors.text, width: 18, height: 18 }} />
+          <Typography
+            variant="omega"
+            fontWeight="semiBold"
+            style={{ color: colors.text }}
+            ellipsis
+          >
+            {data.name}
+          </Typography>
+        </Flex>
+        <Badge
+          size="S"
+          backgroundColor="secondary100"
+          textColor="secondary700"
+          style={{ maxWidth: '90%' }}
+        >
+          <Typography variant="pi" ellipsis>
+            {segmentName}
+          </Typography>
+        </Badge>
+      </Flex>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="yes"
+        style={{
+          background: '#5cb176',
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+          left: '30%',
+        }}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="no"
+        style={{
+          background: '#dc2626',
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+          left: '70%',
+        }}
+      />
+    </>
+  );
+};
+
+export default memo(BranchNode);

package/admin/src/components/StepFlowBuilder/nodes/EntryNode.tsx

@@ -0,0 +1,47 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from 'reactflow';
+import { Flex, Typography } from '@strapi/design-system';
+import { Play } from '@strapi/icons';
+import type { FlowNodeData } from '../types';
+import { NODE_COLORS, NODE_DIMENSIONS } from '../constants';
+
+const EntryNode: React.FC<NodeProps<FlowNodeData>> = ({ selected }) => {
+  const colors = NODE_COLORS.entry;
+
+  return (
+    <>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        gap={2}
+        padding={3}
+        background="neutral0"
+        hasRadius
+        style={{
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : 'none',
+        }}
+      >
+        <Play style={{ color: colors.text, width: 20, height: 20 }} />
+        <Typography variant="omega" fontWeight="semiBold" style={{ color: colors.text }}>
+          Entry Point
+        </Typography>
+      </Flex>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+        }}
+      />
+    </>
+  );
+};
+
+export default memo(EntryNode);

package/admin/src/components/StepFlowBuilder/nodes/ExitNode.tsx

@@ -0,0 +1,47 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from 'reactflow';
+import { Flex, Typography } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
+import type { FlowNodeData } from '../types';
+import { NODE_COLORS, NODE_DIMENSIONS } from '../constants';
+
+const ExitNode: React.FC<NodeProps<FlowNodeData>> = ({ data, selected }) => {
+  const colors = NODE_COLORS.exit;
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+        }}
+      />
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        gap={2}
+        padding={3}
+        background="neutral0"
+        hasRadius
+        style={{
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : 'none',
+        }}
+      >
+        <Cross style={{ color: colors.text, width: 18, height: 18 }} />
+        <Typography variant="omega" fontWeight="semiBold" style={{ color: colors.text }}>
+          {data.name}
+        </Typography>
+      </Flex>
+    </>
+  );
+};
+
+export default memo(ExitNode);