@startsimpli/funnels 0.1.3 → 0.1.5

package/src/components/FunnelStageBuilder/StageActions.test.tsx

@@ -0,0 +1,205 @@
+/**
+ * StageActions tests
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { StageActions } from './StageActions';
+import { FunnelStage } from '../../types';
+
+// Create test stage
+function createTestStage(): FunnelStage {
+  return {
+    id: 'stage-1',
+    order: 0,
+    name: 'Test Stage',
+    filter_logic: 'AND',
+    rules: [],
+    match_action: 'continue',
+    no_match_action: 'continue',
+  };
+}
+
+describe('StageActions', () => {
+  it('renders match action dropdown', () => {
+    const stage = createTestStage();
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    expect(screen.getByLabelText(/Action on Match/i)).toBeInTheDocument();
+  });
+
+  it('renders no match action dropdown', () => {
+    const stage = createTestStage();
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    expect(screen.getByLabelText(/Action on No Match/i)).toBeInTheDocument();
+  });
+
+  it('displays all match action options', () => {
+    const stage = createTestStage();
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    const matchSelect = screen.getByLabelText(/Action on Match/i) as HTMLSelectElement;
+    const options = Array.from(matchSelect.options).map(opt => opt.value);
+
+    expect(options).toEqual(['continue', 'tag', 'tag_continue', 'output']);
+  });
+
+  it('displays all no match action options', () => {
+    const stage = createTestStage();
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    const noMatchSelect = screen.getByLabelText(/Action on No Match/i) as HTMLSelectElement;
+    const options = Array.from(noMatchSelect.options).map(opt => opt.value);
+
+    expect(options).toEqual(['continue', 'exclude', 'tag_exclude']);
+  });
+
+  it('calls onMatchActionChange when match action changes', () => {
+    const stage = createTestStage();
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    const matchSelect = screen.getByLabelText(/Action on Match/i);
+    fireEvent.change(matchSelect, { target: { value: 'output' } });
+
+    expect(onMatchActionChange).toHaveBeenCalledWith('output');
+  });
+
+  it('calls onNoMatchActionChange when no match action changes', () => {
+    const stage = createTestStage();
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    const noMatchSelect = screen.getByLabelText(/Action on No Match/i);
+    fireEvent.change(noMatchSelect, { target: { value: 'exclude' } });
+
+    expect(onNoMatchActionChange).toHaveBeenCalledWith('exclude');
+  });
+
+  it('displays current match action', () => {
+    const stage = createTestStage();
+    stage.match_action = 'tag_continue';
+
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    const matchSelect = screen.getByLabelText(/Action on Match/i) as HTMLSelectElement;
+    expect(matchSelect.value).toBe('tag_continue');
+  });
+
+  it('displays current no match action', () => {
+    const stage = createTestStage();
+    stage.no_match_action = 'tag_exclude';
+
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    const noMatchSelect = screen.getByLabelText(/Action on No Match/i) as HTMLSelectElement;
+    expect(noMatchSelect.value).toBe('tag_exclude');
+  });
+
+  it('shows description for match action', () => {
+    const stage = createTestStage();
+    stage.match_action = 'output';
+
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    expect(screen.getByText(/Add to output and stop processing/i)).toBeInTheDocument();
+  });
+
+  it('shows description for no match action', () => {
+    const stage = createTestStage();
+    stage.no_match_action = 'exclude';
+
+    const onMatchActionChange = vi.fn();
+    const onNoMatchActionChange = vi.fn();
+
+    render(
+      <StageActions
+        stage={stage}
+        onMatchActionChange={onMatchActionChange}
+        onNoMatchActionChange={onNoMatchActionChange}
+      />
+    );
+
+    expect(screen.getByText(/Exclude from output and stop processing/i)).toBeInTheDocument();
+  });
+});

package/src/components/FunnelStageBuilder/StageActions.tsx

@@ -0,0 +1,126 @@
+/**
+ * StageActions - Action dropdowns and toggles
+ *
+ * Features:
+ * - Match action dropdown
+ * - No match action dropdown
+ * - Clear labels and descriptions
+ */
+
+import React from 'react';
+import { FunnelStage, MatchAction, NoMatchAction } from '../../types';
+
+export interface StageActionsProps {
+  /** The stage being configured */
+  stage: FunnelStage;
+
+  /** Match action change handler */
+  onMatchActionChange: (action: MatchAction) => void;
+
+  /** No match action change handler */
+  onNoMatchActionChange: (action: NoMatchAction) => void;
+}
+
+/**
+ * Match action options with descriptions
+ */
+const MATCH_ACTIONS: Array<{ value: MatchAction; label: string; description: string }> = [
+  {
+    value: 'continue',
+    label: 'Continue',
+    description: 'Continue to next stage without tagging',
+  },
+  {
+    value: 'tag',
+    label: 'Tag & Stop',
+    description: 'Add tags and stop processing',
+  },
+  {
+    value: 'tag_continue',
+    label: 'Tag & Continue',
+    description: 'Add tags and continue to next stage',
+  },
+  {
+    value: 'output',
+    label: 'Output',
+    description: 'Add to output and stop processing',
+  },
+];
+
+/**
+ * No match action options with descriptions
+ */
+const NO_MATCH_ACTIONS: Array<{ value: NoMatchAction; label: string; description: string }> = [
+  {
+    value: 'continue',
+    label: 'Continue',
+    description: 'Continue to next stage',
+  },
+  {
+    value: 'exclude',
+    label: 'Exclude',
+    description: 'Exclude from output and stop processing',
+  },
+  {
+    value: 'tag_exclude',
+    label: 'Tag & Exclude',
+    description: 'Add tags, exclude from output, and stop',
+  },
+];
+
+/**
+ * StageActions component
+ */
+export function StageActions({
+  stage,
+  onMatchActionChange,
+  onNoMatchActionChange,
+}: StageActionsProps) {
+  return (
+    <div className="stage-actions">
+      {/* Match action */}
+      <div className="form-group">
+        <label htmlFor={`match-action-${stage.id}`} className="form-label">
+          Action on Match
+        </label>
+        <select
+          id={`match-action-${stage.id}`}
+          value={stage.match_action}
+          onChange={(e) => onMatchActionChange(e.target.value as MatchAction)}
+          className="form-select"
+        >
+          {MATCH_ACTIONS.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <p className="form-hint">
+          {MATCH_ACTIONS.find((a) => a.value === stage.match_action)?.description}
+        </p>
+      </div>
+
+      {/* No match action */}
+      <div className="form-group">
+        <label htmlFor={`no-match-action-${stage.id}`} className="form-label">
+          Action on No Match
+        </label>
+        <select
+          id={`no-match-action-${stage.id}`}
+          value={stage.no_match_action}
+          onChange={(e) => onNoMatchActionChange(e.target.value as NoMatchAction)}
+          className="form-select"
+        >
+          {NO_MATCH_ACTIONS.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <p className="form-hint">
+          {NO_MATCH_ACTIONS.find((a) => a.value === stage.no_match_action)?.description}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/FunnelStageBuilder/StageCard.tsx

@@ -0,0 +1,202 @@
+/**
+ * StageCard - Individual stage card with drag handle
+ *
+ * Features:
+ * - Drag handle for reordering
+ * - Expand/collapse
+ * - Delete button
+ * - Stage configuration form when expanded
+ * - Validation errors and warnings
+ */
+
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { FunnelStage, FieldDefinition } from '../../types';
+import { StageForm } from './StageForm';
+
+export interface StageCardProps {
+  /** The stage to display */
+  stage: FunnelStage;
+
+  /** Whether stage is expanded */
+  expanded: boolean;
+
+  /** Toggle expanded state */
+  onToggleExpanded: () => void;
+
+  /** Update stage */
+  onUpdate: (stage: FunnelStage) => void;
+
+  /** Remove stage */
+  onRemove: () => void;
+
+  /** Available fields */
+  fieldRegistry: FieldDefinition[];
+
+  /** Validation error */
+  error?: string;
+
+  /** Show warnings */
+  showWarnings?: boolean;
+}
+
+/**
+ * StageCard component
+ */
+export function StageCard({
+  stage,
+  expanded,
+  onToggleExpanded,
+  onUpdate,
+  onRemove,
+  fieldRegistry,
+  error,
+  showWarnings = false,
+}: StageCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: stage.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`stage-card ${isDragging ? 'dragging' : ''} ${error ? 'error' : ''}`}
+    >
+      {/* Header */}
+      <div className="stage-header">
+        {/* Drag handle */}
+        <button
+          {...attributes}
+          {...listeners}
+          className="drag-handle"
+          aria-label="Drag to reorder"
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path
+              d="M7 4h6M7 10h6M7 16h6"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+
+        {/* Stage title (clickable to expand/collapse) */}
+        <button
+          onClick={onToggleExpanded}
+          className="stage-title-button"
+          aria-expanded={expanded}
+        >
+          <span className="stage-number">Stage {stage.order + 1}:</span>
+          <span className="stage-name">{stage.name || 'Untitled Stage'}</span>
+
+          {/* Expand/collapse icon */}
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            className={`expand-icon ${expanded ? 'expanded' : ''}`}
+          >
+            <path
+              d="M6 8l4 4 4-4"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+
+        {/* Delete button */}
+        <button
+          onClick={onRemove}
+          className="delete-button"
+          aria-label="Delete stage"
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path
+              d="M6 6l8 8M14 6l-8 8"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Validation error */}
+      {error && (
+        <div className="error-message">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M8 1l7 13H1L8 1z"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinejoin="round"
+            />
+            <path d="M8 6v3M8 11h.01" stroke="currentColor" strokeWidth="2" />
+          </svg>
+          <span>{error}</span>
+        </div>
+      )}
+
+      {/* Warning (no rules) */}
+      {showWarnings && !error && (
+        <div className="warning-message">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="2" />
+            <path d="M8 5v3M8 10h.01" stroke="currentColor" strokeWidth="2" />
+          </svg>
+          <span>Stage has no filter rules</span>
+        </div>
+      )}
+
+      {/* Collapsed summary */}
+      {!expanded && (
+        <div className="stage-summary">
+          <div className="summary-item">
+            <span className="summary-label">Rules:</span>
+            <span className="summary-value">{stage.rules.length}</span>
+          </div>
+          <div className="summary-item">
+            <span className="summary-label">Logic:</span>
+            <span className="summary-value">{stage.filter_logic}</span>
+          </div>
+          <div className="summary-item">
+            <span className="summary-label">On Match:</span>
+            <span className="summary-value">{stage.match_action}</span>
+          </div>
+          <div className="summary-item">
+            <span className="summary-label">On No Match:</span>
+            <span className="summary-value">{stage.no_match_action}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Expanded form */}
+      {expanded && (
+        <div className="stage-form-wrapper">
+          <StageForm
+            stage={stage}
+            onUpdate={onUpdate}
+            fieldRegistry={fieldRegistry}
+          />
+        </div>
+      )}
+    </div>
+  );
+}