@inspirer-dev/crm-dashboard 1.0.17 → 1.0.18

package/admin/src/pages/HomePage/components/CampaignBuilder/index.tsx

@@ -0,0 +1,974 @@
+import React, { memo, useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import {
+  Box,
+  Typography,
+  Flex,
+  Button,
+  Loader,
+  SingleSelect,
+  SingleSelectOption,
+  TextInput,
+  Field,
+  IconButton,
+} from '@strapi/design-system';
+import { Plus, Trash, Drag, ArrowRight } from '@strapi/icons';
+import ReactFlow, {
+  Background,
+  Controls,
+  Node,
+  Edge,
+  Position,
+  Handle,
+  Connection,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  type NodeProps,
+  type EdgeProps,
+  BaseEdge,
+  getBezierPath,
+  EdgeLabelRenderer,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import type { CrmSegment, CrmTemplate, CancelConditionsConfig } from '../../../../types/crm';
+import getBackendUrl from '../../../../utils/getBackendUrl';
+
+const NODE_COLORS = {
+  entrance: { bg: '#10B981', border: '#059669', text: '#fff' },
+  message: { bg: '#3B82F6', border: '#2563EB', text: '#fff' },
+  wait: { bg: '#F59E0B', border: '#D97706', text: '#fff' },
+  branch: { bg: '#8B5CF6', border: '#7C3AED', text: '#fff' },
+  exit: { bg: '#6B7280', border: '#4B5563', text: '#fff' },
+};
+
+const COLUMN_GAP = 250;
+const ROW_HEIGHT = 120;
+
+type NodeType = 'entrance' | 'message' | 'wait' | 'branch' | 'exit';
+type BranchType = 'default' | 'yes' | 'no';
+type WaitType = 'duration' | 'until_event' | 'until_time';
+type ConditionType = 'segment' | 'event_attribute' | 'random_split';
+type Channel = 'telegram' | 'email' | 'push' | 'sms';
+
+interface JourneyMessageConfig {
+  channel: Channel;
+  variants: { name: string; templateId: string; weight: number }[];
+  cancelConditions?: CancelConditionsConfig;
+}
+
+interface JourneyWaitConfig {
+  waitType: WaitType;
+  durationValue: number;
+  durationUnit: 'minutes' | 'hours' | 'days';
+  waitForEvent?: string;
+  waitUntilTime?: string;
+  timeoutDays: number;
+}
+
+interface JourneyBranchConfig {
+  conditionType: ConditionType;
+  segmentId?: string;
+  eventAttributeCondition?: Record<string, unknown>;
+  randomSplitPercentage: number;
+  evaluateAt: 'realtime' | 'at_entry';
+}
+
+interface JourneyStep {
+  id: string;
+  stepKey: string;
+  name: string;
+  nodeType: NodeType;
+  position: { x: number; y: number };
+  messageConfig?: JourneyMessageConfig;
+  waitConfig?: JourneyWaitConfig;
+  branchConfig?: JourneyBranchConfig;
+}
+
+interface JourneyTransition {
+  id: string;
+  sourceStepKey: string;
+  targetStepKey: string;
+  branchType: BranchType;
+  priority: number;
+}
+
+interface Journey {
+  id?: number;
+  documentId?: string;
+  name: string;
+  slug: string;
+  isActive: boolean;
+  triggerType: 'event' | 'scheduled' | 'segment_entry';
+  triggerEventName?: string;
+  entrySegmentId?: string;
+  entryOncePerUser: boolean;
+  reEntryDelayDays: number;
+  steps: JourneyStep[];
+  transitions: JourneyTransition[];
+  entranceStepId?: string;
+  priority: number;
+  dailyCapPerUser: number;
+  ignoreQuietHours: boolean;
+  startDate?: string;
+  endDate?: string;
+}
+
+interface StepNodeData {
+  step: JourneyStep;
+  onSelect: (step: JourneyStep) => void;
+  onDelete: (stepKey: string) => void;
+  isSelected: boolean;
+}
+
+interface BranchEdgeData {
+  branchType: BranchType;
+}
+
+const formatWaitDuration = (config?: JourneyWaitConfig): string => {
+  if (!config) return '';
+  if (config.waitType === 'duration') {
+    return `${config.durationValue} ${config.durationUnit}`;
+  }
+  if (config.waitType === 'until_event') {
+    return `Until: ${config.waitForEvent || 'event'}`;
+  }
+  return `Until: ${config.waitUntilTime || 'time'}`;
+};
+
+const EntranceNode: React.FC<NodeProps<StepNodeData>> = ({ data }) => {
+  const colors = NODE_COLORS.entrance;
+  return (
+    <div
+      onClick={() => data.onSelect(data.step)}
+      style={{
+        background: colors.bg,
+        border: `2px solid ${data.isSelected ? '#fff' : colors.border}`,
+        borderRadius: 8,
+        padding: '16px 24px',
+        color: colors.text,
+        minWidth: 140,
+        cursor: 'pointer',
+        boxShadow: data.isSelected ? '0 0 0 2px #fff, 0 0 0 4px #3B82F6' : 'none',
+      }}
+    >
+      <div style={{ fontWeight: 600, fontSize: 14 }}>ENTRANCE</div>
+      <div style={{ fontSize: 11, opacity: 0.8, marginTop: 4 }}>{data.step.name}</div>
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ background: colors.border, width: 10, height: 10 }}
+      />
+    </div>
+  );
+};
+
+const MessageNode: React.FC<NodeProps<StepNodeData>> = ({ data }) => {
+  const colors = NODE_COLORS.message;
+  const config = data.step.messageConfig;
+  return (
+    <div
+      onClick={() => data.onSelect(data.step)}
+      style={{
+        background: colors.bg,
+        border: `2px solid ${data.isSelected ? '#fff' : colors.border}`,
+        borderRadius: 8,
+        padding: '12px 16px',
+        color: colors.text,
+        minWidth: 140,
+        cursor: 'pointer',
+        boxShadow: data.isSelected ? '0 0 0 2px #fff, 0 0 0 4px #3B82F6' : 'none',
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{ background: colors.border, width: 10, height: 10 }}
+      />
+      <div style={{ fontSize: 10, opacity: 0.7, textTransform: 'uppercase' }}>
+        {config?.channel || 'telegram'}
+      </div>
+      <div style={{ fontWeight: 600, marginTop: 2 }}>{data.step.name}</div>
+      {config?.variants && config.variants.length > 0 && (
+        <div style={{ fontSize: 10, opacity: 0.8, marginTop: 4 }}>
+          {config.variants.length} variant{config.variants.length !== 1 ? 's' : ''}
+        </div>
+      )}
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ background: colors.border, width: 10, height: 10 }}
+      />
+    </div>
+  );
+};
+
+const WaitNode: React.FC<NodeProps<StepNodeData>> = ({ data }) => {
+  const colors = NODE_COLORS.wait;
+  return (
+    <div
+      onClick={() => data.onSelect(data.step)}
+      style={{
+        background: colors.bg,
+        border: `2px solid ${data.isSelected ? '#fff' : colors.border}`,
+        borderRadius: 8,
+        padding: '12px 16px',
+        color: colors.text,
+        minWidth: 120,
+        cursor: 'pointer',
+        boxShadow: data.isSelected ? '0 0 0 2px #fff, 0 0 0 4px #3B82F6' : 'none',
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{ background: colors.border, width: 10, height: 10 }}
+      />
+      <div style={{ fontWeight: 600 }}>WAIT</div>
+      <div style={{ fontSize: 11, marginTop: 4 }}>{formatWaitDuration(data.step.waitConfig)}</div>
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ background: colors.border, width: 10, height: 10 }}
+      />
+    </div>
+  );
+};
+
+const BranchNode: React.FC<NodeProps<StepNodeData>> = ({ data }) => {
+  const colors = NODE_COLORS.branch;
+  const config = data.step.branchConfig;
+  return (
+    <div
+      onClick={() => data.onSelect(data.step)}
+      style={{
+        background: colors.bg,
+        border: `2px solid ${data.isSelected ? '#fff' : colors.border}`,
+        borderRadius: 8,
+        padding: '12px 16px',
+        color: colors.text,
+        minWidth: 140,
+        cursor: 'pointer',
+        boxShadow: data.isSelected ? '0 0 0 2px #fff, 0 0 0 4px #3B82F6' : 'none',
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{ background: colors.border, width: 10, height: 10 }}
+      />
+      <div style={{ fontWeight: 600 }}>BRANCH</div>
+      <div style={{ fontSize: 10, opacity: 0.8, marginTop: 4 }}>
+        {config?.conditionType === 'segment' && 'Segment Check'}
+        {config?.conditionType === 'event_attribute' && 'Event Attribute'}
+        {config?.conditionType === 'random_split' && `${config.randomSplitPercentage}% Split`}
+      </div>
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="yes"
+        style={{ background: '#10B981', width: 10, height: 10, top: '30%' }}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="no"
+        style={{ background: '#EF4444', width: 10, height: 10, top: '70%' }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          right: -30,
+          top: '25%',
+          fontSize: 9,
+          color: '#10B981',
+          fontWeight: 600,
+        }}
+      >
+        YES
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          right: -24,
+          top: '65%',
+          fontSize: 9,
+          color: '#EF4444',
+          fontWeight: 600,
+        }}
+      >
+        NO
+      </div>
+    </div>
+  );
+};
+
+const ExitNode: React.FC<NodeProps<StepNodeData>> = ({ data }) => {
+  const colors = NODE_COLORS.exit;
+  return (
+    <div
+      onClick={() => data.onSelect(data.step)}
+      style={{
+        background: colors.bg,
+        border: `2px solid ${data.isSelected ? '#fff' : colors.border}`,
+        borderRadius: 8,
+        padding: '16px 24px',
+        color: colors.text,
+        minWidth: 100,
+        cursor: 'pointer',
+        boxShadow: data.isSelected ? '0 0 0 2px #fff, 0 0 0 4px #3B82F6' : 'none',
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{ background: colors.border, width: 10, height: 10 }}
+      />
+      <div style={{ fontWeight: 600, textAlign: 'center' }}>EXIT</div>
+    </div>
+  );
+};
+
+const BranchEdge: React.FC<EdgeProps<BranchEdgeData>> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+  markerEnd,
+  data,
+}) => {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  });
+
+  const label = data?.branchType === 'yes' ? 'YES' : data?.branchType === 'no' ? 'NO' : '';
+  const color = data?.branchType === 'yes' ? '#10B981' : data?.branchType === 'no' ? '#EF4444' : '#6B7280';
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} style={{ ...style, stroke: color, strokeWidth: 2 }} markerEnd={markerEnd} />
+      {label && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              fontSize: 10,
+              fontWeight: 600,
+              color: '#fff',
+              background: color,
+              borderRadius: 4,
+              padding: '2px 6px',
+              pointerEvents: 'none',
+            }}
+          >
+            {label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+};
+
+const nodeTypes = {
+  entrance: EntranceNode,
+  message: MessageNode,
+  wait: WaitNode,
+  branch: BranchNode,
+  exit: ExitNode,
+};
+
+const edgeTypes = {
+  branchEdge: BranchEdge,
+};
+
+const createDefaultStep = (nodeType: NodeType, position: { x: number; y: number }): JourneyStep => {
+  const stepKey = `${nodeType}_${Date.now()}`;
+  const step: JourneyStep = {
+    id: stepKey,
+    stepKey,
+    name: nodeType.charAt(0).toUpperCase() + nodeType.slice(1),
+    nodeType,
+    position,
+  };
+
+  switch (nodeType) {
+    case 'message':
+      step.messageConfig = {
+        channel: 'telegram',
+        variants: [{ name: 'Variant A', templateId: '', weight: 100 }],
+      };
+      break;
+    case 'wait':
+      step.waitConfig = {
+        waitType: 'duration',
+        durationValue: 30,
+        durationUnit: 'minutes',
+        timeoutDays: 7,
+      };
+      break;
+    case 'branch':
+      step.branchConfig = {
+        conditionType: 'segment',
+        randomSplitPercentage: 50,
+        evaluateAt: 'realtime',
+      };
+      break;
+  }
+
+  return step;
+};
+
+interface NodeConfigPanelProps {
+  step: JourneyStep | null;
+  segments: CrmSegment[];
+  templates: CrmTemplate[];
+  onUpdate: (step: JourneyStep) => void;
+  onClose: () => void;
+}
+
+const NodeConfigPanel: React.FC<NodeConfigPanelProps> = ({
+  step,
+  segments,
+  templates,
+  onUpdate,
+  onClose,
+}) => {
+  if (!step) return null;
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onUpdate({ ...step, name: e.target.value });
+  };
+
+  const handleMessageConfigChange = (field: string, value: unknown) => {
+    onUpdate({
+      ...step,
+      messageConfig: {
+        ...step.messageConfig!,
+        [field]: value,
+      },
+    });
+  };
+
+  const handleWaitConfigChange = (field: string, value: unknown) => {
+    onUpdate({
+      ...step,
+      waitConfig: {
+        ...step.waitConfig!,
+        [field]: value,
+      },
+    });
+  };
+
+  const handleBranchConfigChange = (field: string, value: unknown) => {
+    onUpdate({
+      ...step,
+      branchConfig: {
+        ...step.branchConfig!,
+        [field]: value,
+      },
+    });
+  };
+
+  return (
+    <Box
+      background="neutral0"
+      padding={4}
+      hasRadius
+      shadow="filterShadow"
+      borderStyle="solid"
+      borderWidth="1px"
+      borderColor="neutral200"
+      style={{ width: 320, maxHeight: '80vh', overflowY: 'auto' }}
+    >
+      <Flex justifyContent="space-between" alignItems="center" marginBottom={4}>
+        <Typography variant="delta" fontWeight="bold">
+          {step.nodeType.toUpperCase()} Config
+        </Typography>
+        <IconButton onClick={onClose} label="Close">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </IconButton>
+      </Flex>
+
+      <Field.Root>
+        <Field.Label>Step Name</Field.Label>
+        <TextInput value={step.name} onChange={handleNameChange} />
+      </Field.Root>
+
+      {step.nodeType === 'message' && step.messageConfig && (
+        <Box marginTop={4}>
+          <Field.Root>
+            <Field.Label>Channel</Field.Label>
+            <SingleSelect
+              value={step.messageConfig.channel}
+              onChange={(val: string | number) => handleMessageConfigChange('channel', val)}
+            >
+              <SingleSelectOption value="telegram">Telegram</SingleSelectOption>
+              <SingleSelectOption value="email">Email</SingleSelectOption>
+              <SingleSelectOption value="push">Push</SingleSelectOption>
+              <SingleSelectOption value="sms">SMS</SingleSelectOption>
+            </SingleSelect>
+          </Field.Root>
+
+          <Box marginTop={3}>
+            <Typography variant="pi" fontWeight="semiBold">
+              Variants
+            </Typography>
+            {step.messageConfig.variants.map((variant, idx) => (
+              <Box
+                key={idx}
+                marginTop={2}
+                padding={3}
+                background="neutral100"
+                hasRadius
+              >
+                <Field.Root>
+                  <Field.Label>Variant Name</Field.Label>
+                  <TextInput
+                    value={variant.name}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      const newVariants = [...step.messageConfig!.variants];
+                      newVariants[idx] = { ...variant, name: e.target.value };
+                      handleMessageConfigChange('variants', newVariants);
+                    }}
+                  />
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>Template</Field.Label>
+                  <SingleSelect
+                    value={variant.templateId}
+                    onChange={(val: string | number) => {
+                      const newVariants = [...step.messageConfig!.variants];
+                      newVariants[idx] = { ...variant, templateId: String(val) };
+                      handleMessageConfigChange('variants', newVariants);
+                    }}
+                    placeholder="Select template"
+                  >
+                    {templates.map((t) => (
+                      <SingleSelectOption key={t.documentId} value={t.documentId}>
+                        {t.name}
+                      </SingleSelectOption>
+                    ))}
+                  </SingleSelect>
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>Weight</Field.Label>
+                  <TextInput
+                    type="number"
+                    value={String(variant.weight)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      const newVariants = [...step.messageConfig!.variants];
+                      newVariants[idx] = { ...variant, weight: parseInt(e.target.value) || 0 };
+                      handleMessageConfigChange('variants', newVariants);
+                    }}
+                  />
+                </Field.Root>
+              </Box>
+            ))}
+            <Button
+              variant="secondary"
+              size="S"
+              marginTop={2}
+              onClick={() => {
+                const newVariants = [
+                  ...step.messageConfig!.variants,
+                  { name: `Variant ${String.fromCharCode(65 + step.messageConfig!.variants.length)}`, templateId: '', weight: 100 },
+                ];
+                handleMessageConfigChange('variants', newVariants);
+              }}
+            >
+              Add Variant
+            </Button>
+          </Box>
+        </Box>
+      )}
+
+      {step.nodeType === 'wait' && step.waitConfig && (
+        <Box marginTop={4}>
+          <Field.Root>
+            <Field.Label>Wait Type</Field.Label>
+            <SingleSelect
+              value={step.waitConfig.waitType}
+              onChange={(val: string | number) => handleWaitConfigChange('waitType', val)}
+            >
+              <SingleSelectOption value="duration">Duration</SingleSelectOption>
+              <SingleSelectOption value="until_event">Until Event</SingleSelectOption>
+              <SingleSelectOption value="until_time">Until Time</SingleSelectOption>
+            </SingleSelect>
+          </Field.Root>
+
+          {step.waitConfig.waitType === 'duration' && (
+            <Flex gap={2} marginTop={3}>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Duration</Field.Label>
+                  <TextInput
+                    type="number"
+                    value={String(step.waitConfig.durationValue)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleWaitConfigChange('durationValue', parseInt(e.target.value) || 0)
+                    }
+                  />
+                </Field.Root>
+              </Box>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Unit</Field.Label>
+                  <SingleSelect
+                    value={step.waitConfig.durationUnit}
+                    onChange={(val: string | number) => handleWaitConfigChange('durationUnit', val)}
+                  >
+                    <SingleSelectOption value="minutes">Minutes</SingleSelectOption>
+                    <SingleSelectOption value="hours">Hours</SingleSelectOption>
+                    <SingleSelectOption value="days">Days</SingleSelectOption>
+                  </SingleSelect>
+                </Field.Root>
+              </Box>
+            </Flex>
+          )}
+
+          {step.waitConfig.waitType === 'until_event' && (
+            <Field.Root>
+              <Field.Label>Event Name</Field.Label>
+              <TextInput
+                value={step.waitConfig.waitForEvent || ''}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleWaitConfigChange('waitForEvent', e.target.value)
+                }
+                placeholder="e.g., deposit_completed"
+              />
+            </Field.Root>
+          )}
+        </Box>
+      )}
+
+      {step.nodeType === 'branch' && step.branchConfig && (
+        <Box marginTop={4}>
+          <Field.Root>
+            <Field.Label>Condition Type</Field.Label>
+            <SingleSelect
+              value={step.branchConfig.conditionType}
+              onChange={(val: string | number) => handleBranchConfigChange('conditionType', val)}
+            >
+              <SingleSelectOption value="segment">Segment Check</SingleSelectOption>
+              <SingleSelectOption value="event_attribute">Event Attribute</SingleSelectOption>
+              <SingleSelectOption value="random_split">Random Split</SingleSelectOption>
+            </SingleSelect>
+          </Field.Root>
+
+          {step.branchConfig.conditionType === 'segment' && (
+            <Field.Root>
+              <Field.Label>Segment</Field.Label>
+              <SingleSelect
+                value={step.branchConfig.segmentId || ''}
+                onChange={(val: string | number) => handleBranchConfigChange('segmentId', val)}
+                placeholder="Select segment"
+              >
+                {segments.map((s) => (
+                  <SingleSelectOption key={s.documentId} value={s.documentId}>
+                    {s.name}
+                  </SingleSelectOption>
+                ))}
+              </SingleSelect>
+            </Field.Root>
+          )}
+
+          {step.branchConfig.conditionType === 'random_split' && (
+            <Field.Root>
+              <Field.Label>YES Percentage</Field.Label>
+              <TextInput
+                type="number"
+                value={String(step.branchConfig.randomSplitPercentage)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleBranchConfigChange('randomSplitPercentage', parseInt(e.target.value) || 50)
+                }
+              />
+            </Field.Root>
+          )}
+
+          <Field.Root>
+            <Field.Label>Evaluate At</Field.Label>
+            <SingleSelect
+              value={step.branchConfig.evaluateAt}
+              onChange={(val: string | number) => handleBranchConfigChange('evaluateAt', val)}
+            >
+              <SingleSelectOption value="realtime">Realtime</SingleSelectOption>
+              <SingleSelectOption value="at_entry">At Entry</SingleSelectOption>
+            </SingleSelect>
+          </Field.Root>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const CampaignBuilder: React.FC = () => {
+  const [campaign, setCampaign] = useState<Journey>({
+    name: 'New Campaign',
+    slug: 'new-campaign',
+    isActive: false,
+    triggerType: 'event',
+    entryOncePerUser: true,
+    reEntryDelayDays: 0,
+    steps: [
+      createDefaultStep('entrance', { x: 50, y: 150 }),
+      createDefaultStep('exit', { x: 750, y: 150 }),
+    ],
+    transitions: [],
+    priority: 5,
+    dailyCapPerUser: 1,
+    ignoreQuietHours: false,
+  });
+
+  const [selectedStep, setSelectedStep] = useState<JourneyStep | null>(null);
+  const [segments, setSegments] = useState<CrmSegment[]>([]);
+  const [templates, setTemplates] = useState<CrmTemplate[]>([]);
+  const [loading, setLoading] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const backendUrl = getBackendUrl();
+      const [segmentsRes, templatesRes] = await Promise.all([
+        fetch(new URL('/api/crm/segments', backendUrl).toString()),
+        fetch(new URL('/api/crm/templates', backendUrl).toString()),
+      ]);
+
+      if (segmentsRes.ok) {
+        const data = await segmentsRes.json();
+        setSegments(Array.isArray(data) ? data : data?.data || []);
+      }
+
+      if (templatesRes.ok) {
+        const data = await templatesRes.json();
+        setTemplates(Array.isArray(data) ? data : data?.data || []);
+      }
+    } catch (err) {
+      console.error('Failed to fetch data:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleSelectStep = useCallback((step: JourneyStep) => {
+    setSelectedStep(step);
+  }, []);
+
+  const handleDeleteStep = useCallback((stepKey: string) => {
+    setCampaign((prev) => ({
+      ...prev,
+      steps: prev.steps.filter((s) => s.stepKey !== stepKey),
+      transitions: prev.transitions.filter(
+        (t) => t.sourceStepKey !== stepKey && t.targetStepKey !== stepKey
+      ),
+    }));
+    setSelectedStep(null);
+  }, []);
+
+  const handleUpdateStep = useCallback((updatedStep: JourneyStep) => {
+    setCampaign((prev) => ({
+      ...prev,
+      steps: prev.steps.map((s) => (s.stepKey === updatedStep.stepKey ? updatedStep : s)),
+    }));
+    setSelectedStep(updatedStep);
+  }, []);
+
+  const handleAddNode = useCallback((nodeType: NodeType) => {
+    const maxX = Math.max(...campaign.steps.map((s) => s.position.x), 0);
+    const newStep = createDefaultStep(nodeType, { x: maxX + 200, y: 150 });
+    setCampaign((prev) => ({
+      ...prev,
+      steps: [...prev.steps, newStep],
+    }));
+  }, [campaign.steps]);
+
+  const onConnect = useCallback((connection: Connection) => {
+    if (!connection.source || !connection.target) return;
+
+    const sourceStep = campaign.steps.find((s) => s.stepKey === connection.source);
+    let branchType: BranchType = 'default';
+
+    if (sourceStep?.nodeType === 'branch') {
+      branchType = connection.sourceHandle === 'yes' ? 'yes' : 'no';
+    }
+
+    const newTransition: JourneyTransition = {
+      id: `${connection.source}-${connection.target}-${branchType}`,
+      sourceStepKey: connection.source,
+      targetStepKey: connection.target,
+      branchType,
+      priority: 0,
+    };
+
+    setCampaign((prev) => ({
+      ...prev,
+      transitions: [...prev.transitions, newTransition],
+    }));
+  }, [campaign.steps]);
+
+  const nodes: Node[] = useMemo(() => {
+    return campaign.steps.map((step) => ({
+      id: step.stepKey,
+      type: step.nodeType,
+      position: step.position,
+      data: {
+        step,
+        onSelect: handleSelectStep,
+        onDelete: handleDeleteStep,
+        isSelected: selectedStep?.stepKey === step.stepKey,
+      },
+      draggable: true,
+    }));
+  }, [campaign.steps, selectedStep, handleSelectStep, handleDeleteStep]);
+
+  const edges: Edge[] = useMemo(() => {
+    return campaign.transitions.map((t) => ({
+      id: t.id,
+      source: t.sourceStepKey,
+      target: t.targetStepKey,
+      sourceHandle: t.branchType !== 'default' ? t.branchType : undefined,
+      type: t.branchType !== 'default' ? 'branchEdge' : 'default',
+      data: { branchType: t.branchType },
+      style: { strokeWidth: 2 },
+      animated: true,
+    }));
+  }, [campaign.transitions]);
+
+  const onNodesChange = useCallback((changes: any) => {
+    setCampaign((prev) => {
+      const newSteps = [...prev.steps];
+      for (const change of changes) {
+        if (change.type === 'position' && change.position) {
+          const idx = newSteps.findIndex((s) => s.stepKey === change.id);
+          if (idx !== -1) {
+            newSteps[idx] = { ...newSteps[idx], position: change.position };
+          }
+        }
+      }
+      return { ...prev, steps: newSteps };
+    });
+  }, []);
+
+  const onEdgesChange = useCallback((changes: any) => {
+    setCampaign((prev) => {
+      let newTransitions = [...prev.transitions];
+      for (const change of changes) {
+        if (change.type === 'remove') {
+          newTransitions = newTransitions.filter((t) => t.id !== change.id);
+        }
+      }
+      return { ...prev, transitions: newTransitions };
+    });
+  }, []);
+
+  const handleSaveCampaign = useCallback(async () => {
+    console.log('Saving campaign:', campaign);
+  }, [campaign]);
+
+  return (
+    <Box padding={6}>
+      <Flex justifyContent="space-between" alignItems="center" marginBottom={5}>
+        <Box>
+          <Typography variant="delta" fontWeight="bold">
+            Конструктор кампаний
+          </Typography>
+          <Typography variant="pi" textColor="neutral600" marginTop={2} style={{ display: 'block' }}>
+            Создание кампаний с ветвлением
+          </Typography>
+        </Box>
+        <Flex gap={2}>
+          <Button onClick={fetchData} loading={loading} variant="tertiary">
+            Обновить
+          </Button>
+          <Button onClick={handleSaveCampaign} variant="default">
+            Сохранить
+          </Button>
+        </Flex>
+      </Flex>
+
+      <Box
+        background="neutral0"
+        padding={3}
+        hasRadius
+        marginBottom={4}
+        borderStyle="solid"
+        borderWidth="1px"
+        borderColor="neutral200"
+      >
+        <Flex gap={2} alignItems="center">
+          <Typography variant="pi" fontWeight="semiBold" marginRight={2}>
+            Add Node:
+          </Typography>
+          <Button size="S" variant="secondary" onClick={() => handleAddNode('message')}>
+            Message
+          </Button>
+          <Button size="S" variant="secondary" onClick={() => handleAddNode('wait')}>
+            Wait
+          </Button>
+          <Button size="S" variant="secondary" onClick={() => handleAddNode('branch')}>
+            Branch
+          </Button>
+          <Button size="S" variant="secondary" onClick={() => handleAddNode('exit')}>
+            Exit
+          </Button>
+        </Flex>
+      </Box>
+
+      <Flex gap={4}>
+        <Box
+          ref={containerRef}
+          background="neutral100"
+          hasRadius
+          shadow="filterShadow"
+          borderStyle="solid"
+          borderWidth="1px"
+          borderColor="neutral150"
+          style={{ flex: 1, height: 600, position: 'relative' }}
+        >
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+            fitView
+            fitViewOptions={{ padding: 0.2 }}
+            defaultEdgeOptions={{ type: 'smoothstep' }}
+          >
+            <Background gap={20} />
+            <Controls />
+          </ReactFlow>
+        </Box>
+
+        {selectedStep && (
+          <NodeConfigPanel
+            step={selectedStep}
+            segments={segments}
+            templates={templates}
+            onUpdate={handleUpdateStep}
+            onClose={() => setSelectedStep(null)}
+          />
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
+export default memo(CampaignBuilder);