@bernierllc/email-campaign-management

Marketing email campaign management UI with visual workflow builder, A/B testing, and real-time analytics.

Installation

npm install @bernierllc/email-campaign-management

Peer Dependencies

This package requires React 18+ as a peer dependency:

npm install react react-dom

Usage

Basic Campaign Dashboard

import { CampaignDashboard } from '@bernierllc/email-campaign-management';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <CampaignDashboard campaignId="campaign-123" />
    </QueryClientProvider>
  );
}

Campaign Builder

import { CampaignBuilder } from '@bernierllc/email-campaign-management';

function CreateCampaign() {
  const handleSave = (campaign) => {
    console.log('Campaign saved:', campaign);
    // Save to your backend
  };

  return (
    <CampaignBuilder
      onSave={handleSave}
      onPublish={(campaign) => console.log('Publishing:', campaign)}
    />
  );
}

Campaign List

import { CampaignList } from '@bernierllc/email-campaign-management';

function MyCampaigns() {
  return (
    <CampaignList
      onSelectCampaign={(campaign) => {
        console.log('Selected:', campaign);
      }}
    />
  );
}

Using Campaign Store (Zustand)

import { useCampaignStore } from '@bernierllc/email-campaign-management';

function CampaignManager() {
  const {
    campaigns,
    loading,
    fetchCampaigns,
    createCampaign,
    updateCampaign
  } = useCampaignStore();

  useEffect(() => {
    fetchCampaigns();
  }, []);

  const handleCreate = async () => {
    await createCampaign({
      name: 'New Campaign',
      type: 'drip',
      status: 'draft',
      workflow: { id: 'w1', nodes: [], edges: [] },
      audience: { type: 'all' },
      schedule: { type: 'immediate' }
    });
  };

  return (
    <div>
      {campaigns.map(campaign => (
        <div key={campaign.id}>{campaign.name}</div>
      ))}
    </div>
  );
}

Workflow Validation

import { useWorkflowValidation } from '@bernierllc/email-campaign-management';
import type { CampaignWorkflow } from '@bernierllc/email-campaign-management';

function WorkflowEditor({ workflow }: { workflow: CampaignWorkflow }) {
  const validation = useWorkflowValidation(workflow);

  return (
    <div>
      {!validation.valid && (
        <div className="errors">
          {validation.errors.map((error, i) => (
            <p key={i}>{error}</p>
          ))}
        </div>
      )}
    </div>
  );
}

API Reference

Components

CampaignDashboard

Displays campaign analytics and performance metrics.

Props:

• campaignId: string - ID of the campaign to display

CampaignBuilder

Campaign creation and editing interface with workflow builder.

Props:

• campaign?: Campaign - Existing campaign to edit (optional)
• onSave: (campaign: Partial<Campaign>) => void - Save handler
• onPublish?: (campaign: Campaign) => void - Publish handler (optional)

CampaignList

List of all campaigns with filtering and selection.

Props:

• onSelectCampaign?: (campaign: Campaign) => void - Selection handler (optional)

Hooks

useCampaignStore()

Zustand store for campaign state management.

Returns:

{
  campaigns: Campaign[];
  activeCampaign: Campaign | null;
  loading: boolean;
  error: string | null;
  fetchCampaigns: () => Promise<void>;
  createCampaign: (campaign: Partial<Campaign>) => Promise<Campaign | null>;
  updateCampaign: (id: string, updates: Partial<Campaign>) => Promise<void>;
  deleteCampaign: (id: string) => Promise<void>;
  setActiveCampaign: (campaign: Campaign | null) => void;
}

useCampaignMetrics(campaignId: string)

React Query hook for fetching campaign metrics.

Returns: Query result with CampaignMetrics data

useEmailMetrics(campaignId: string)

React Query hook for fetching email-level metrics.

Returns: Query result with EmailMetrics[] data

useWorkflowValidation(workflow: CampaignWorkflow)

Validates workflow structure.

Returns:

{
  valid: boolean;
  errors: string[];
}

Types

interface Campaign {
  id: string;
  name: string;
  description?: string;
  type: 'one-time' | 'drip' | 'welcome' | 'nurture' | 'automated';
  status: 'draft' | 'scheduled' | 'active' | 'paused' | 'completed';
  workflow: CampaignWorkflow;
  audience: AudienceConfig;
  schedule: ScheduleConfig;
  abTest?: ABTestConfig;
  createdAt: Date;
  updatedAt: Date;
  createdBy: string;
}

interface CampaignMetrics {
  campaignId: string;
  sent: number;
  delivered: number;
  bounced: number;
  opened: number;
  clicked: number;
  converted: number;
  unsubscribed: number;
  openRate: number;
  clickRate: number;
  conversionRate: number;
  lastUpdated: Date;
}

See full type definitions in src/types.

Configuration

Environment Variables

# API Configuration
REACT_APP_API_URL=http://localhost:3000/api

# Feature Flags
REACT_APP_ENABLE_AB_TESTING=true
REACT_APP_ENABLE_ANALYTICS=true

# Metrics Configuration
REACT_APP_METRICS_REFRESH_INTERVAL=30000  # 30 seconds

# Workflow Limits
REACT_APP_MAX_WORKFLOW_NODES=50

# Defaults
REACT_APP_DEFAULT_TIMEZONE=America/New_York

Runtime Configuration

import { setConfig } from '@bernierllc/email-campaign-management';

setConfig({
  apiUrl: 'https://api.example.com',
  enableABTesting: true,
  metricsRefreshInterval: 60000
});

Features

• Campaign Builder: Visual workflow editor for creating email sequences
• A/B Testing: Configure and monitor A/B test campaigns
• Real-time Analytics: Live campaign performance metrics
• Audience Segmentation: Target specific user segments
• Campaign Scheduling: Schedule campaigns or trigger based on events
• Campaign Library: Save, clone, and reuse campaign templates

Integration Status

• Logger: integrated - UI actions, errors, and performance logging
• Docs-Suite: ready - TypeDoc format
• NeverHub: optional - Real-time event updates and campaign coordination

Dependencies

This package integrates with:

• @bernierllc/email-sender - Email delivery
• @bernierllc/email-webhook-events - Event tracking
• @bernierllc/logger - Logging infrastructure

Architecture Notes

CRITICAL DEPENDENCY: This package requires @bernierllc/workflow-ui from the content-suite, which provides the visual workflow builder component. Until that package is published, the workflow canvas will show a placeholder.

Examples

See the examples directory for complete working examples:

• Basic campaign creation
• A/B test setup
• Analytics dashboard integration
• Custom workflow builders

License

Copyright (c) 2025 Bernier LLC. All rights reserved.

This file is licensed to the client under a limited-use license. The client may use and modify this code only within the scope of the project it was delivered for. Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.