@inspirer-dev/crm-dashboard 1.0.21 → 1.0.22

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

@@ -1,744 +0,0 @@
-import React, { forwardRef, useEffect, useState } from 'react';
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Field,
-  Flex,
-  IconButton,
-  SingleSelect,
-  SingleSelectOption,
-  TextInput,
-  Typography,
-  Tooltip,
-  Badge,
-  Divider,
-} from '@strapi/design-system';
-import { Plus, Trash, ArrowUp, ArrowDown, Mail, Clock, ArrowRight, Play, Cross } from '@strapi/icons';
-import { generateId } from '../RulesBuilder/utils';
-
-type JourneyNodeType = 'entrance' | 'message' | 'wait' | 'branch' | 'exit';
-type JourneyChannel = 'telegram' | 'email' | 'push' | 'sms';
-type JourneyWaitUnit = 'minutes' | 'hours' | 'days';
-type JourneyBranchType = 'default' | 'yes' | 'no';
-
-interface JourneyMessageVariant {
-  id: string;
-  name: string;
-  templateId: string;
-  weight: number;
-}
-
-interface JourneyMessageConfig {
-  channel: JourneyChannel;
-  variants: JourneyMessageVariant[];
-}
-
-interface JourneyWaitConfig {
-  durationValue: number;
-  durationUnit: JourneyWaitUnit;
-}
-
-interface JourneyBranchConfig {
-  segmentId: string;
-  useStepSegment: boolean;
-}
-
-interface JourneyStep {
-  id: string;
-  stepKey: string;
-  name: string;
-  nodeType: JourneyNodeType;
-  messageConfig?: JourneyMessageConfig;
-  waitConfig?: JourneyWaitConfig;
-  branchConfig?: JourneyBranchConfig;
-}
-
-interface JourneyTransition {
-  id: string;
-  sourceStepKey: string;
-  targetStepKey: string;
-  branchType: JourneyBranchType;
-}
-
-interface JourneyConfig {
-  steps: JourneyStep[];
-  transitions: JourneyTransition[];
-  entryOncePerUser: boolean;
-  reEntryDelayDays: number;
-}
-
-interface JourneyConfigFieldProps {
-  name: string;
-  value?: string | JourneyConfig | null;
-  onChange: (event: { target: { name: string; value: string } }) => void;
-  intlLabel: { id: string; defaultMessage: string };
-  attribute?: unknown;
-  disabled?: boolean;
-  error?: string;
-  required?: boolean;
-  hint?: string;
-}
-
-const NODE_TYPES: { value: JourneyNodeType; label: string; icon: React.ReactNode; description: string }[] = [
-  { value: 'message', label: 'Send Message', icon: <Mail />, description: 'Send a message to user' },
-  { value: 'wait', label: 'Wait', icon: <Clock />, description: 'Wait for a period of time' },
-  { value: 'branch', label: 'Branch', icon: <ArrowRight />, description: 'Split flow based on segment' },
-  { value: 'exit', label: 'Exit', icon: <Cross />, description: 'End the journey' },
-];
-
-const CHANNELS: { value: JourneyChannel; label: string }[] = [
-  { value: 'telegram', label: 'Telegram' },
-  { value: 'email', label: 'Email' },
-  { value: 'push', label: 'Push Notification' },
-  { value: 'sms', label: 'SMS' },
-];
-
-const WAIT_UNITS: { value: JourneyWaitUnit; label: string }[] = [
-  { value: 'minutes', label: 'Minutes' },
-  { value: 'hours', label: 'Hours' },
-  { value: 'days', label: 'Days' },
-];
-
-const DEFAULT_CONFIG: JourneyConfig = {
-  steps: [
-    { id: generateId(), stepKey: 'entrance', name: 'Entry Point', nodeType: 'entrance' },
-  ],
-  transitions: [],
-  entryOncePerUser: true,
-  reEntryDelayDays: 30,
-};
-
-const parseConfig = (value: string | JourneyConfig | null | undefined): JourneyConfig => {
-  if (!value) return { ...DEFAULT_CONFIG, steps: [{ ...DEFAULT_CONFIG.steps[0], id: generateId() }] };
-  if (typeof value === 'string') {
-    try {
-      const parsed = JSON.parse(value);
-      if (parsed.steps && Array.isArray(parsed.steps)) {
-        return parsed as JourneyConfig;
-      }
-    } catch {
-      return { ...DEFAULT_CONFIG, steps: [{ ...DEFAULT_CONFIG.steps[0], id: generateId() }] };
-    }
-  }
-  if (typeof value === 'object' && value.steps) {
-    return value as JourneyConfig;
-  }
-  return { ...DEFAULT_CONFIG, steps: [{ ...DEFAULT_CONFIG.steps[0], id: generateId() }] };
-};
-
-const serializeConfig = (config: JourneyConfig): string => JSON.stringify(config);
-
-const getStepIcon = (nodeType: JourneyNodeType) => {
-  switch (nodeType) {
-    case 'entrance': return <Play />;
-    case 'message': return <Mail />;
-    case 'wait': return <Clock />;
-    case 'branch': return <ArrowRight />;
-    case 'exit': return <Cross />;
-    default: return null;
-  }
-};
-
-const getStepColor = (nodeType: JourneyNodeType) => {
-  switch (nodeType) {
-    case 'entrance': return { bg: 'success100', border: '#328048', text: 'success600' };
-    case 'message': return { bg: 'primary100', border: '#4945ff', text: 'primary600' };
-    case 'wait': return { bg: 'warning100', border: '#d9822f', text: 'warning600' };
-    case 'branch': return { bg: 'secondary100', border: '#8e44ad', text: 'secondary600' };
-    case 'exit': return { bg: 'neutral200', border: '#666687', text: 'neutral600' };
-    default: return { bg: 'neutral100', border: '#dcdce4', text: 'neutral600' };
-  }
-};
-
-const StepCard: React.FC<{
-  step: JourneyStep;
-  index: number;
-  totalSteps: number;
-  disabled?: boolean;
-  expanded: boolean;
-  onToggleExpand: () => void;
-  onUpdate: (updates: Partial<JourneyStep>) => void;
-  onDelete: () => void;
-  onMove: (direction: 'up' | 'down') => void;
-  transitions: JourneyTransition[];
-  allSteps: JourneyStep[];
-  onUpdateTransition: (stepKey: string, branchType: JourneyBranchType, targetStepKey: string) => void;
-}> = ({ step, index, totalSteps, disabled, expanded, onToggleExpand, onUpdate, onDelete, onMove, transitions, allSteps, onUpdateTransition }) => {
-  const colors = getStepColor(step.nodeType);
-  const isEntrance = step.nodeType === 'entrance';
-
-  const availableTargets = allSteps.filter(s => s.stepKey !== step.stepKey && s.nodeType !== 'entrance');
-
-  const getNextStep = (branchType: JourneyBranchType) => {
-    const t = transitions.find(tr => tr.sourceStepKey === step.stepKey && tr.branchType === branchType);
-    return t?.targetStepKey || '';
-  };
-
-  const updateMessageConfig = (updates: Partial<JourneyMessageConfig>) => {
-    onUpdate({
-      messageConfig: {
-        channel: step.messageConfig?.channel || 'telegram',
-        variants: step.messageConfig?.variants || [],
-        ...step.messageConfig,
-        ...updates,
-      },
-    });
-  };
-
-  const updateWaitConfig = (updates: Partial<JourneyWaitConfig>) => {
-    onUpdate({
-      waitConfig: {
-        durationValue: step.waitConfig?.durationValue || 30,
-        durationUnit: step.waitConfig?.durationUnit || 'minutes',
-        ...step.waitConfig,
-        ...updates,
-      },
-    });
-  };
-
-  const updateBranchConfig = (updates: Partial<JourneyBranchConfig>) => {
-    onUpdate({
-      branchConfig: {
-        segmentId: step.branchConfig?.segmentId || '',
-        useStepSegment: step.branchConfig?.useStepSegment || false,
-        ...step.branchConfig,
-        ...updates,
-      },
-    });
-  };
-
-  const addVariant = () => {
-    const variants = step.messageConfig?.variants || [];
-    updateMessageConfig({
-      variants: [
-        ...variants,
-        { id: generateId(), name: `Variant ${variants.length + 1}`, templateId: '', weight: 100 },
-      ],
-    });
-  };
-
-  const updateVariant = (variantId: string, updates: Partial<JourneyMessageVariant>) => {
-    const variants = step.messageConfig?.variants || [];
-    updateMessageConfig({
-      variants: variants.map(v => v.id === variantId ? { ...v, ...updates } : v),
-    });
-  };
-
-  const deleteVariant = (variantId: string) => {
-    const variants = step.messageConfig?.variants || [];
-    updateMessageConfig({
-      variants: variants.filter(v => v.id !== variantId),
-    });
-  };
-
-  return (
-    <Card
-      background={colors.bg}
-      style={{ border: `2px solid ${colors.border}` }}
-    >
-      <CardContent>
-        <Flex direction="column" gap={3} padding={3}>
-          <Flex justifyContent="space-between" alignItems="center">
-            <Flex gap={2} alignItems="center">
-              <Box style={{ color: colors.border }}>{getStepIcon(step.nodeType)}</Box>
-              <Badge backgroundColor={colors.bg} textColor={colors.text}>
-                {step.nodeType.toUpperCase()}
-              </Badge>
-              <Typography variant="omega" fontWeight="bold">{step.name}</Typography>
-            </Flex>
-
-            <Flex gap={1}>
-              {!isEntrance && (
-                <>
-                  <Tooltip label="Move up">
-                    <IconButton
-                      onClick={() => onMove('up')}
-                      label="Move up"
-                      variant="ghost"
-                      disabled={disabled || index <= 1}
-                    >
-                      <ArrowUp />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip label="Move down">
-                    <IconButton
-                      onClick={() => onMove('down')}
-                      label="Move down"
-                      variant="ghost"
-                      disabled={disabled || index >= totalSteps - 1}
-                    >
-                      <ArrowDown />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip label="Delete step">
-                    <IconButton
-                      onClick={onDelete}
-                      label="Delete"
-                      variant="ghost"
-                      disabled={disabled}
-                    >
-                      <Trash />
-                    </IconButton>
-                  </Tooltip>
-                </>
-              )}
-              <Button variant="ghost" onClick={onToggleExpand} size="S">
-                {expanded ? 'Collapse' : 'Expand'}
-              </Button>
-            </Flex>
-          </Flex>
-
-          {expanded && (
-            <Box paddingTop={2}>
-              <Divider />
-              <Box paddingTop={3}>
-                <Flex direction="column" gap={3}>
-                  <Field.Root>
-                    <Field.Label>Step Name</Field.Label>
-                    <TextInput
-                      value={step.name}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                        onUpdate({ name: e.target.value })
-                      }
-                      disabled={disabled || isEntrance}
-                    />
-                  </Field.Root>
-
-                  {!isEntrance && (
-                    <Field.Root>
-                      <Field.Label>Step Key (unique identifier)</Field.Label>
-                      <TextInput
-                        value={step.stepKey}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          onUpdate({ stepKey: e.target.value.toLowerCase().replace(/\s+/g, '_') })
-                        }
-                        disabled={disabled}
-                        placeholder="e.g., welcome_message"
-                      />
-                    </Field.Root>
-                  )}
-
-                  {step.nodeType === 'message' && (
-                    <>
-                      <Field.Root>
-                        <Field.Label>Channel</Field.Label>
-                        <SingleSelect
-                          value={step.messageConfig?.channel || 'telegram'}
-                          onChange={(val: string) => updateMessageConfig({ channel: val as JourneyChannel })}
-                          disabled={disabled}
-                        >
-                          {CHANNELS.map(ch => (
-                            <SingleSelectOption key={ch.value} value={ch.value}>
-                              {ch.label}
-                            </SingleSelectOption>
-                          ))}
-                        </SingleSelect>
-                      </Field.Root>
-
-                      <Box>
-                        <Typography variant="pi" fontWeight="bold" style={{ marginBottom: 8, display: 'block' }}>
-                          Message Variants (A/B Testing)
-                        </Typography>
-                        <Flex direction="column" gap={2}>
-                          {(step.messageConfig?.variants || []).map((variant, vIdx) => (
-                            <Flex key={variant.id} gap={2} alignItems="flex-end" background="neutral0" padding={2} hasRadius>
-                              <Box style={{ flex: 1 }}>
-                                <Field.Root>
-                                  <Field.Label>Name</Field.Label>
-                                  <TextInput
-                                    value={variant.name}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                      updateVariant(variant.id, { name: e.target.value })
-                                    }
-                                    disabled={disabled}
-                                  />
-                                </Field.Root>
-                              </Box>
-                              <Box style={{ flex: 1 }}>
-                                <Field.Root>
-                                  <Field.Label>Template ID</Field.Label>
-                                  <TextInput
-                                    value={variant.templateId}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                      updateVariant(variant.id, { templateId: e.target.value })
-                                    }
-                                    disabled={disabled}
-                                    placeholder="Enter template documentId"
-                                  />
-                                </Field.Root>
-                              </Box>
-                              <Box style={{ width: 80 }}>
-                                <Field.Root>
-                                  <Field.Label>Weight %</Field.Label>
-                                  <TextInput
-                                    type="number"
-                                    value={String(variant.weight)}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                      updateVariant(variant.id, { weight: parseInt(e.target.value, 10) || 0 })
-                                    }
-                                    disabled={disabled}
-                                  />
-                                </Field.Root>
-                              </Box>
-                              <IconButton
-                                onClick={() => deleteVariant(variant.id)}
-                                label="Delete variant"
-                                variant="ghost"
-                                disabled={disabled}
-                              >
-                                <Trash />
-                              </IconButton>
-                            </Flex>
-                          ))}
-                          <Button
-                            startIcon={<Plus />}
-                            onClick={addVariant}
-                            variant="secondary"
-                            size="S"
-                            disabled={disabled}
-                          >
-                            Add Variant
-                          </Button>
-                        </Flex>
-                      </Box>
-                    </>
-                  )}
-
-                  {step.nodeType === 'wait' && (
-                    <Flex gap={2}>
-                      <Box style={{ width: 120 }}>
-                        <Field.Root>
-                          <Field.Label>Duration</Field.Label>
-                          <TextInput
-                            type="number"
-                            value={String(step.waitConfig?.durationValue || 30)}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                              updateWaitConfig({ durationValue: parseInt(e.target.value, 10) || 0 })
-                            }
-                            disabled={disabled}
-                          />
-                        </Field.Root>
-                      </Box>
-                      <Box style={{ width: 150 }}>
-                        <Field.Root>
-                          <Field.Label>Unit</Field.Label>
-                          <SingleSelect
-                            value={step.waitConfig?.durationUnit || 'minutes'}
-                            onChange={(val: string) => updateWaitConfig({ durationUnit: val as JourneyWaitUnit })}
-                            disabled={disabled}
-                          >
-                            {WAIT_UNITS.map(u => (
-                              <SingleSelectOption key={u.value} value={u.value}>
-                                {u.label}
-                              </SingleSelectOption>
-                            ))}
-                          </SingleSelect>
-                        </Field.Root>
-                      </Box>
-                    </Flex>
-                  )}
-
-                  {step.nodeType === 'branch' && (
-                    <>
-                      <Field.Root>
-                        <Field.Label>Segment ID (optional)</Field.Label>
-                        <TextInput
-                          value={step.branchConfig?.segmentId || ''}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                            updateBranchConfig({ segmentId: e.target.value })
-                          }
-                          disabled={disabled}
-                          placeholder="Leave empty to use campaign's segment"
-                        />
-                        <Field.Hint>
-                          If empty, uses campaign's segment for evaluation
-                        </Field.Hint>
-                      </Field.Root>
-
-                      <Box background="neutral0" padding={3} hasRadius>
-                        <Typography variant="pi" fontWeight="bold" style={{ marginBottom: 12, display: 'block' }}>
-                          Branch Paths
-                        </Typography>
-                        <Flex direction="column" gap={2}>
-                          <Flex gap={2} alignItems="center">
-                            <Badge backgroundColor="success100" textColor="success600">YES</Badge>
-                            <Box style={{ flex: 1 }}>
-                              <SingleSelect
-                                value={getNextStep('yes')}
-                                onChange={(val: string) => onUpdateTransition(step.stepKey, 'yes', val)}
-                                disabled={disabled}
-                                placeholder="Select next step..."
-                              >
-                                <SingleSelectOption value="">-- None --</SingleSelectOption>
-                                {availableTargets.map(s => (
-                                  <SingleSelectOption key={s.stepKey} value={s.stepKey}>
-                                    {s.name} ({s.nodeType})
-                                  </SingleSelectOption>
-                                ))}
-                              </SingleSelect>
-                            </Box>
-                          </Flex>
-                          <Flex gap={2} alignItems="center">
-                            <Badge backgroundColor="danger100" textColor="danger600">NO</Badge>
-                            <Box style={{ flex: 1 }}>
-                              <SingleSelect
-                                value={getNextStep('no')}
-                                onChange={(val: string) => onUpdateTransition(step.stepKey, 'no', val)}
-                                disabled={disabled}
-                                placeholder="Select next step..."
-                              >
-                                <SingleSelectOption value="">-- None --</SingleSelectOption>
-                                {availableTargets.map(s => (
-                                  <SingleSelectOption key={s.stepKey} value={s.stepKey}>
-                                    {s.name} ({s.nodeType})
-                                  </SingleSelectOption>
-                                ))}
-                              </SingleSelect>
-                            </Box>
-                          </Flex>
-                        </Flex>
-                      </Box>
-                    </>
-                  )}
-
-                  {step.nodeType !== 'branch' && step.nodeType !== 'exit' && (
-                    <Field.Root>
-                      <Field.Label>Next Step</Field.Label>
-                      <SingleSelect
-                        value={getNextStep('default')}
-                        onChange={(val: string) => onUpdateTransition(step.stepKey, 'default', val)}
-                        disabled={disabled}
-                        placeholder="Select next step..."
-                      >
-                        <SingleSelectOption value="">-- None (end) --</SingleSelectOption>
-                        {availableTargets.map(s => (
-                          <SingleSelectOption key={s.stepKey} value={s.stepKey}>
-                            {s.name} ({s.nodeType})
-                          </SingleSelectOption>
-                        ))}
-                      </SingleSelect>
-                    </Field.Root>
-                  )}
-                </Flex>
-              </Box>
-            </Box>
-          )}
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-};
-
-const JourneyConfigField = forwardRef<HTMLDivElement, JourneyConfigFieldProps>(
-  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
-    const [config, setConfig] = useState<JourneyConfig>(() => parseConfig(value));
-    const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
-    const [showAddStep, setShowAddStep] = useState(false);
-
-    useEffect(() => {
-      setConfig(parseConfig(value));
-    }, [value]);
-
-    const update = (newConfig: JourneyConfig) => {
-      setConfig(newConfig);
-      onChange({ target: { name, value: serializeConfig(newConfig) } });
-    };
-
-    const toggleExpand = (stepId: string) => {
-      setExpandedSteps(prev => {
-        const next = new Set(prev);
-        if (next.has(stepId)) {
-          next.delete(stepId);
-        } else {
-          next.add(stepId);
-        }
-        return next;
-      });
-    };
-
-    const addStep = (nodeType: JourneyNodeType) => {
-      const newStep: JourneyStep = {
-        id: generateId(),
-        stepKey: `${nodeType}_${Date.now()}`,
-        name: NODE_TYPES.find(n => n.value === nodeType)?.label || nodeType,
-        nodeType,
-        ...(nodeType === 'message' && {
-          messageConfig: { channel: 'telegram', variants: [] },
-        }),
-        ...(nodeType === 'wait' && {
-          waitConfig: { durationValue: 30, durationUnit: 'minutes' },
-        }),
-        ...(nodeType === 'branch' && {
-          branchConfig: { segmentId: '', useStepSegment: false },
-        }),
-      };
-      update({ ...config, steps: [...config.steps, newStep] });
-      setExpandedSteps(prev => new Set(prev).add(newStep.id));
-      setShowAddStep(false);
-    };
-
-    const updateStep = (stepId: string, updates: Partial<JourneyStep>) => {
-      update({
-        ...config,
-        steps: config.steps.map(s => s.id === stepId ? { ...s, ...updates } : s),
-      });
-    };
-
-    const deleteStep = (stepId: string) => {
-      const step = config.steps.find(s => s.id === stepId);
-      if (!step) return;
-      update({
-        ...config,
-        steps: config.steps.filter(s => s.id !== stepId),
-        transitions: config.transitions.filter(
-          t => t.sourceStepKey !== step.stepKey && t.targetStepKey !== step.stepKey
-        ),
-      });
-    };
-
-    const moveStep = (stepId: string, direction: 'up' | 'down') => {
-      const idx = config.steps.findIndex(s => s.id === stepId);
-      if (idx <= 0 && direction === 'up') return;
-      if (idx >= config.steps.length - 1 && direction === 'down') return;
-
-      const newSteps = [...config.steps];
-      const targetIdx = direction === 'up' ? idx - 1 : idx + 1;
-      if (targetIdx === 0) return;
-
-      [newSteps[idx], newSteps[targetIdx]] = [newSteps[targetIdx], newSteps[idx]];
-      update({ ...config, steps: newSteps });
-    };
-
-    const updateTransition = (sourceStepKey: string, branchType: JourneyBranchType, targetStepKey: string) => {
-      let transitions = config.transitions.filter(
-        t => !(t.sourceStepKey === sourceStepKey && t.branchType === branchType)
-      );
-      if (targetStepKey) {
-        transitions.push({
-          id: generateId(),
-          sourceStepKey,
-          targetStepKey,
-          branchType,
-        });
-      }
-      update({ ...config, transitions });
-    };
-
-    const updateGlobalConfig = (updates: Partial<JourneyConfig>) => {
-      update({ ...config, ...updates });
-    };
-
-    return (
-      <Field.Root name={name} error={error} required={required} hint={hint} ref={ref}>
-        <Flex direction="column" gap={4}>
-          <Field.Label>{intlLabel?.defaultMessage || 'Journey Configuration'}</Field.Label>
-
-          <Card background="neutral100">
-            <CardContent>
-              <Flex direction="column" gap={3} padding={3}>
-                <Typography variant="delta">Journey Settings</Typography>
-                <Flex gap={4}>
-                  <Field.Root>
-                    <Field.Label>Entry once per user</Field.Label>
-                    <SingleSelect
-                      value={config.entryOncePerUser ? 'yes' : 'no'}
-                      onChange={(val: string) => updateGlobalConfig({ entryOncePerUser: val === 'yes' })}
-                      disabled={disabled}
-                    >
-                      <SingleSelectOption value="yes">Yes</SingleSelectOption>
-                      <SingleSelectOption value="no">No (allow re-entry)</SingleSelectOption>
-                    </SingleSelect>
-                  </Field.Root>
-                  <Field.Root>
-                    <Field.Label>Re-entry delay (days)</Field.Label>
-                    <TextInput
-                      type="number"
-                      value={String(config.reEntryDelayDays || 30)}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                        updateGlobalConfig({ reEntryDelayDays: parseInt(e.target.value, 10) || 0 })
-                      }
-                      disabled={disabled}
-                    />
-                  </Field.Root>
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Box>
-            <Flex justifyContent="space-between" alignItems="center" style={{ marginBottom: 12 }}>
-              <Typography variant="delta">Steps ({config.steps.length})</Typography>
-              <Button
-                startIcon={<Plus />}
-                onClick={() => setShowAddStep(!showAddStep)}
-                variant="secondary"
-                disabled={disabled}
-              >
-                Add Step
-              </Button>
-            </Flex>
-
-            {showAddStep && (
-              <Card background="primary100" style={{ marginBottom: 16, border: '2px dashed #4945ff' }}>
-                <CardContent>
-                  <Flex direction="column" gap={3} padding={3}>
-                    <Typography variant="omega" fontWeight="bold">Select step type:</Typography>
-                    <Flex gap={2} wrap="wrap">
-                      {NODE_TYPES.map(nt => (
-                        <Box
-                          key={nt.value}
-                          padding={3}
-                          background="neutral0"
-                          hasRadius
-                          style={{ cursor: 'pointer', border: '1px solid #dcdce4', minWidth: 140 }}
-                          onClick={() => addStep(nt.value)}
-                        >
-                          <Flex direction="column" alignItems="center" gap={1}>
-                            {nt.icon}
-                            <Typography variant="omega" fontWeight="bold">{nt.label}</Typography>
-                            <Typography variant="pi" textColor="neutral500" style={{ textAlign: 'center' }}>
-                              {nt.description}
-                            </Typography>
-                          </Flex>
-                        </Box>
-                      ))}
-                    </Flex>
-                  </Flex>
-                </CardContent>
-              </Card>
-            )}
-
-            <Flex direction="column" gap={2}>
-              {config.steps.map((step, idx) => (
-                <StepCard
-                  key={step.id}
-                  step={step}
-                  index={idx}
-                  totalSteps={config.steps.length}
-                  disabled={disabled}
-                  expanded={expandedSteps.has(step.id)}
-                  onToggleExpand={() => toggleExpand(step.id)}
-                  onUpdate={(updates) => updateStep(step.id, updates)}
-                  onDelete={() => deleteStep(step.id)}
-                  onMove={(dir) => moveStep(step.id, dir)}
-                  transitions={config.transitions}
-                  allSteps={config.steps}
-                  onUpdateTransition={updateTransition}
-                />
-              ))}
-            </Flex>
-          </Box>
-
-          {error && <Field.Error>{error}</Field.Error>}
-          {hint && <Field.Hint>{hint}</Field.Hint>}
-        </Flex>
-      </Field.Root>
-    );
-  }
-);
-
-JourneyConfigField.displayName = 'JourneyConfigField';
-
-export default JourneyConfigField;