@bernierllc/email-campaign-management 1.0.1

package/src/api/campaigns.ts

@@ -0,0 +1,38 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import { apiClient, APIResponse } from './client';
+import { Campaign, CampaignMetrics, EmailMetrics } from '../types';
+
+export async function getCampaigns(): Promise<APIResponse<Campaign[]>> {
+  return apiClient.get<Campaign[]>('/campaigns');
+}
+
+export async function getCampaign(id: string): Promise<APIResponse<Campaign>> {
+  return apiClient.get<Campaign>(`/campaigns/${id}`);
+}
+
+export async function createCampaign(campaign: Partial<Campaign>): Promise<APIResponse<Campaign>> {
+  return apiClient.post<Campaign>('/campaigns', campaign);
+}
+
+export async function updateCampaign(id: string, updates: Partial<Campaign>): Promise<APIResponse<Campaign>> {
+  return apiClient.put<Campaign>(`/campaigns/${id}`, updates);
+}
+
+export async function deleteCampaign(id: string): Promise<APIResponse<void>> {
+  return apiClient.delete<void>(`/campaigns/${id}`);
+}
+
+export async function getCampaignMetrics(campaignId: string): Promise<APIResponse<CampaignMetrics>> {
+  return apiClient.get<CampaignMetrics>(`/campaigns/${campaignId}/metrics`);
+}
+
+export async function getEmailMetrics(campaignId: string): Promise<APIResponse<EmailMetrics[]>> {
+  return apiClient.get<EmailMetrics[]>(`/campaigns/${campaignId}/emails/metrics`);
+}

package/src/api/client.ts

@@ -0,0 +1,131 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import { getConfig } from '../config';
+
+export interface APIResponse<T = unknown> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+export class APIClient {
+  private baseUrl: string;
+
+  constructor(baseUrl?: string) {
+    this.baseUrl = baseUrl || getConfig().apiUrl;
+  }
+
+  async get<T>(endpoint: string): Promise<APIResponse<T>> {
+    try {
+      const response = await fetch(`${this.baseUrl}${endpoint}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${response.statusText}`
+        };
+      }
+
+      const data = await response.json();
+      return { success: true, data };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  }
+
+  async post<T>(endpoint: string, body: unknown): Promise<APIResponse<T>> {
+    try {
+      const response = await fetch(`${this.baseUrl}${endpoint}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      });
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${response.statusText}`
+        };
+      }
+
+      const data = await response.json();
+      return { success: true, data };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  }
+
+  async put<T>(endpoint: string, body: unknown): Promise<APIResponse<T>> {
+    try {
+      const response = await fetch(`${this.baseUrl}${endpoint}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      });
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${response.statusText}`
+        };
+      }
+
+      const data = await response.json();
+      return { success: true, data };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  }
+
+  async delete<T>(endpoint: string): Promise<APIResponse<T>> {
+    try {
+      const response = await fetch(`${this.baseUrl}${endpoint}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${response.statusText}`
+        };
+      }
+
+      const data = await response.json();
+      return { success: true, data };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  }
+}
+
+export const apiClient = new APIClient();

package/src/components/CampaignBuilder/index.tsx

@@ -0,0 +1,123 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import React, { useState } from 'react';
+import { Campaign, CampaignWorkflow } from '../../types';
+import { getDefaultWorkflow } from '../../utils/workflow-helpers';
+
+export interface CampaignBuilderProps {
+  campaign?: Campaign;
+  onSave: (campaign: Partial<Campaign>) => void;
+  onPublish?: (campaign: Campaign) => void;
+}
+
+export const CampaignBuilder: React.FC<CampaignBuilderProps> = ({
+  campaign,
+  onSave,
+  onPublish
+}) => {
+  const [name, setName] = useState(campaign?.name || '');
+  const [description, setDescription] = useState(campaign?.description || '');
+  const [workflow] = useState<CampaignWorkflow>(
+    campaign?.workflow || getDefaultWorkflow()
+  );
+  const [activeTab, setActiveTab] = useState<'workflow' | 'audience' | 'schedule' | 'abtest'>('workflow');
+
+  const handleSave = () => {
+    onSave({
+      name,
+      description,
+      workflow,
+      type: 'one-time',
+      status: 'draft'
+    });
+  };
+
+  return (
+    <div className="campaign-builder">
+      <div className="campaign-header">
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Campaign Name"
+          className="campaign-name-input"
+        />
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Campaign Description"
+          className="campaign-description-input"
+        />
+      </div>
+
+      <div className="campaign-tabs">
+        <button
+          className={activeTab === 'workflow' ? 'active' : ''}
+          onClick={() => setActiveTab('workflow')}
+        >
+          Workflow
+        </button>
+        <button
+          className={activeTab === 'audience' ? 'active' : ''}
+          onClick={() => setActiveTab('audience')}
+        >
+          Audience
+        </button>
+        <button
+          className={activeTab === 'schedule' ? 'active' : ''}
+          onClick={() => setActiveTab('schedule')}
+        >
+          Schedule
+        </button>
+        <button
+          className={activeTab === 'abtest' ? 'active' : ''}
+          onClick={() => setActiveTab('abtest')}
+        >
+          A/B Test
+        </button>
+      </div>
+
+      <div className="campaign-content">
+        {activeTab === 'workflow' && (
+          <div className="workflow-tab">
+            <p>Workflow editor placeholder</p>
+            <p>Nodes: {workflow.nodes.length}</p>
+            <p>Edges: {workflow.edges.length}</p>
+          </div>
+        )}
+        {activeTab === 'audience' && (
+          <div className="audience-tab">
+            <p>Audience selector placeholder</p>
+          </div>
+        )}
+        {activeTab === 'schedule' && (
+          <div className="schedule-tab">
+            <p>Schedule settings placeholder</p>
+          </div>
+        )}
+        {activeTab === 'abtest' && (
+          <div className="abtest-tab">
+            <p>A/B test configuration placeholder</p>
+          </div>
+        )}
+      </div>
+
+      <div className="campaign-actions">
+        <button onClick={handleSave} className="btn-save">
+          Save Campaign
+        </button>
+        {onPublish && campaign && (
+          <button onClick={() => onPublish(campaign)} className="btn-publish">
+            Publish Campaign
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/CampaignDashboard/MetricsOverview.tsx

@@ -0,0 +1,41 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import React from 'react';
+import { CampaignMetrics } from '../../types';
+import { formatNumber, formatPercentage } from '../../utils/formatting';
+
+export interface MetricsOverviewProps {
+  metrics: CampaignMetrics;
+}
+
+export const MetricsOverview: React.FC<MetricsOverviewProps> = ({ metrics }) => {
+  return (
+    <div className="metrics-overview">
+      <div className="metric-card">
+        <div className="metric-value">{formatNumber(metrics.sent)}</div>
+        <div className="metric-label">Sent</div>
+      </div>
+      <div className="metric-card">
+        <div className="metric-value">{formatNumber(metrics.opened)}</div>
+        <div className="metric-label">Opened</div>
+        <div className="metric-rate">{formatPercentage(metrics.openRate)}</div>
+      </div>
+      <div className="metric-card">
+        <div className="metric-value">{formatNumber(metrics.clicked)}</div>
+        <div className="metric-label">Clicked</div>
+        <div className="metric-rate">{formatPercentage(metrics.clickRate)}</div>
+      </div>
+      <div className="metric-card">
+        <div className="metric-value">{formatNumber(metrics.converted)}</div>
+        <div className="metric-label">Converted</div>
+        <div className="metric-rate">{formatPercentage(metrics.conversionRate)}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/CampaignDashboard/PerformanceChart.tsx

@@ -0,0 +1,49 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import React from 'react';
+import { CampaignMetrics } from '../../types';
+
+export interface PerformanceChartProps {
+  metrics: CampaignMetrics;
+  type: 'open_rate' | 'click_rate' | 'conversion_rate';
+}
+
+export const PerformanceChart: React.FC<PerformanceChartProps> = ({ metrics, type }) => {
+  const getTitle = () => {
+    switch (type) {
+      case 'open_rate':
+        return 'Open Rate';
+      case 'click_rate':
+        return 'Click Rate';
+      case 'conversion_rate':
+        return 'Conversion Rate';
+    }
+  };
+
+  const getValue = () => {
+    switch (type) {
+      case 'open_rate':
+        return metrics.openRate;
+      case 'click_rate':
+        return metrics.clickRate;
+      case 'conversion_rate':
+        return metrics.conversionRate;
+    }
+  };
+
+  return (
+    <div className="performance-chart">
+      <h3>{getTitle()}</h3>
+      <div className="chart-placeholder">
+        <p>Chart: {getValue().toFixed(2)}%</p>
+        <p>(Integration with recharts or similar library needed)</p>
+      </div>
+    </div>
+  );
+};

package/src/components/CampaignDashboard/index.tsx

@@ -0,0 +1,52 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import React from 'react';
+import { useCampaignMetrics, useEmailMetrics } from '../../hooks/useCampaignMetrics';
+import { MetricsOverview } from './MetricsOverview';
+import { PerformanceChart } from './PerformanceChart';
+
+export interface CampaignDashboardProps {
+  campaignId: string;
+}
+
+export const CampaignDashboard: React.FC<CampaignDashboardProps> = ({ campaignId }) => {
+  const { data: metrics, isLoading: metricsLoading, isError: metricsError } = useCampaignMetrics(campaignId);
+  const { data: emailMetrics, isLoading: emailLoading } = useEmailMetrics(campaignId);
+
+  if (metricsLoading || emailLoading) {
+    return <div className="loading">Loading campaign analytics...</div>;
+  }
+
+  if (metricsError || !metrics) {
+    return <div className="error">Failed to load campaign metrics</div>;
+  }
+
+  return (
+    <div className="campaign-dashboard">
+      <h2>Campaign Analytics</h2>
+      <MetricsOverview metrics={metrics} />
+      <div className="charts-grid">
+        <PerformanceChart metrics={metrics} type="open_rate" />
+        <PerformanceChart metrics={metrics} type="click_rate" />
+      </div>
+      {emailMetrics && (
+        <div className="email-metrics">
+          <h3>Email Performance</h3>
+          <ul>
+            {emailMetrics.map(email => (
+              <li key={email.emailId}>
+                Node {email.nodeId}: {email.sent} sent, {email.openRate.toFixed(2)}% open rate
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/CampaignList/index.tsx

@@ -0,0 +1,53 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import React, { useEffect } from 'react';
+import { useCampaignStore } from '../../hooks/useCampaignStore';
+import { Campaign } from '../../types';
+
+export interface CampaignListProps {
+  onSelectCampaign?: (campaign: Campaign) => void;
+}
+
+export const CampaignList: React.FC<CampaignListProps> = ({ onSelectCampaign }) => {
+  const { campaigns, loading, error, fetchCampaigns } = useCampaignStore();
+
+  useEffect(() => {
+    fetchCampaigns();
+  }, [fetchCampaigns]);
+
+  if (loading) {
+    return <div className="loading">Loading campaigns...</div>;
+  }
+
+  if (error) {
+    return <div className="error">Error: {error}</div>;
+  }
+
+  return (
+    <div className="campaign-list">
+      <h2>Campaigns</h2>
+      {campaigns.length === 0 ? (
+        <p>No campaigns found. Create your first campaign!</p>
+      ) : (
+        <ul>
+          {campaigns.map(campaign => (
+            <li key={campaign.id} onClick={() => onSelectCampaign?.(campaign)}>
+              <div className="campaign-item">
+                <h3>{campaign.name}</h3>
+                <p>{campaign.description}</p>
+                <span className="campaign-status">{campaign.status}</span>
+                <span className="campaign-type">{campaign.type}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/src/config.ts

@@ -0,0 +1,39 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+export interface CampaignUIConfig {
+  apiUrl: string;
+  enableABTesting: boolean;
+  enableAnalytics: boolean;
+  metricsRefreshInterval: number;
+  maxWorkflowNodes: number;
+  defaultTimezone: string;
+}
+
+export const defaultConfig: CampaignUIConfig = {
+  apiUrl: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
+  enableABTesting: process.env.REACT_APP_ENABLE_AB_TESTING !== 'false',
+  enableAnalytics: process.env.REACT_APP_ENABLE_ANALYTICS !== 'false',
+  metricsRefreshInterval: parseInt(process.env.REACT_APP_METRICS_REFRESH_INTERVAL || '30000', 10),
+  maxWorkflowNodes: parseInt(process.env.REACT_APP_MAX_WORKFLOW_NODES || '50', 10),
+  defaultTimezone: process.env.REACT_APP_DEFAULT_TIMEZONE || 'UTC'
+};
+
+let currentConfig: CampaignUIConfig = { ...defaultConfig };
+
+export function getConfig(): CampaignUIConfig {
+  return { ...currentConfig };
+}
+
+export function setConfig(config: Partial<CampaignUIConfig>): void {
+  currentConfig = { ...currentConfig, ...config };
+}
+
+export function resetConfig(): void {
+  currentConfig = { ...defaultConfig };
+}

package/src/hooks/useCampaignMetrics.ts

@@ -0,0 +1,41 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import { useQuery } from '@tanstack/react-query';
+import { getCampaignMetrics, getEmailMetrics } from '../api/campaigns';
+import { getConfig } from '../config';
+
+export function useCampaignMetrics(campaignId: string) {
+  return useQuery({
+    queryKey: ['campaign-metrics', campaignId],
+    queryFn: async () => {
+      const response = await getCampaignMetrics(campaignId);
+      if (!response.success) {
+        throw new Error(response.error || 'Failed to fetch campaign metrics');
+      }
+      return response.data;
+    },
+    refetchInterval: getConfig().metricsRefreshInterval,
+    enabled: !!campaignId
+  });
+}
+
+export function useEmailMetrics(campaignId: string) {
+  return useQuery({
+    queryKey: ['email-metrics', campaignId],
+    queryFn: async () => {
+      const response = await getEmailMetrics(campaignId);
+      if (!response.success) {
+        throw new Error(response.error || 'Failed to fetch email metrics');
+      }
+      return response.data;
+    },
+    refetchInterval: getConfig().metricsRefreshInterval,
+    enabled: !!campaignId
+  });
+}

package/src/hooks/useCampaignStore.ts

@@ -0,0 +1,86 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import { create } from 'zustand';
+import { Campaign } from '../types';
+import * as campaignAPI from '../api/campaigns';
+
+interface CampaignStore {
+  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;
+}
+
+export const useCampaignStore = create<CampaignStore>((set) => ({
+  campaigns: [],
+  activeCampaign: null,
+  loading: false,
+  error: null,
+
+  fetchCampaigns: async () => {
+    set({ loading: true, error: null });
+    const response = await campaignAPI.getCampaigns();
+    if (response.success && response.data) {
+      set({ campaigns: response.data, loading: false });
+    } else {
+      set({ error: response.error || 'Failed to fetch campaigns', loading: false });
+    }
+  },
+
+  createCampaign: async (campaign: Partial<Campaign>) => {
+    set({ loading: true, error: null });
+    const response = await campaignAPI.createCampaign(campaign);
+    if (response.success && response.data) {
+      set(state => ({
+        campaigns: [...state.campaigns, response.data as Campaign],
+        loading: false
+      }));
+      return response.data;
+    } else {
+      set({ error: response.error || 'Failed to create campaign', loading: false });
+      return null;
+    }
+  },
+
+  updateCampaign: async (id: string, updates: Partial<Campaign>) => {
+    set({ loading: true, error: null });
+    const response = await campaignAPI.updateCampaign(id, updates);
+    if (response.success && response.data) {
+      set(state => ({
+        campaigns: state.campaigns.map(c => c.id === id ? response.data as Campaign : c),
+        activeCampaign: state.activeCampaign?.id === id ? response.data : state.activeCampaign,
+        loading: false
+      }));
+    } else {
+      set({ error: response.error || 'Failed to update campaign', loading: false });
+    }
+  },
+
+  deleteCampaign: async (id: string) => {
+    set({ loading: true, error: null });
+    const response = await campaignAPI.deleteCampaign(id);
+    if (response.success) {
+      set(state => ({
+        campaigns: state.campaigns.filter(c => c.id !== id),
+        activeCampaign: state.activeCampaign?.id === id ? null : state.activeCampaign,
+        loading: false
+      }));
+    } else {
+      set({ error: response.error || 'Failed to delete campaign', loading: false });
+    }
+  },
+
+  setActiveCampaign: (campaign: Campaign | null) => set({ activeCampaign: campaign })
+}));

package/src/hooks/useWorkflowValidation.ts

@@ -0,0 +1,17 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+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.
+*/
+
+import { useMemo } from 'react';
+import { CampaignWorkflow } from '../types';
+import { validateWorkflow, ValidationResult } from '../utils/validation';
+
+export function useWorkflowValidation(workflow: CampaignWorkflow): ValidationResult {
+  return useMemo(() => {
+    return validateWorkflow(workflow);
+  }, [workflow]);
+}