infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

Import error handling and subscribe state

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-03 21:52:17 +01:00
parent a28be9adc9
commit e4a43dfb57
8 changed files with 308 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api/src/jobs/import-processor.ts
+14 -4
View File
@@ -96,16 +96,26 @@ export function createImportWorker() {
continue;
}
// Extract custom data (all fields except email)
const {email: _, ...customData} = record;
// Extract subscribed field if present
const subscribedValue = record.subscribed;
let subscribed: boolean | undefined;
if (subscribedValue !== undefined && subscribedValue !== '') {
// Handle various truthy/falsy values
const lowerValue = subscribedValue.toLowerCase().trim();
subscribed = lowerValue === 'true' || lowerValue === '1' || lowerValue === 'yes';
}
// Extract custom data (all fields except email and subscribed)
const {email: _, subscribed: __, ...customData} = record;
const data = Object.keys(customData).length > 0 ? customData : undefined;
// Check if contact exists before upserting
const existingContact = await ContactService.findByEmail(projectId, email);
const isUpdate = !!existingContact;
// Upsert contact
await ContactService.upsert(projectId, email, data, true);
// Upsert contact with subscribed value from CSV if provided, otherwise default to true
await ContactService.upsert(projectId, email, data, subscribed ?? true);
result.successCount++;
if (isUpdate) {
apps/api/src/services/QueueService.ts
+2
View File
@@ -316,6 +316,7 @@ export class QueueService {
const state = await job.getState();
const progress = job.progress;
const returnValue = job.returnvalue;
const failedReason = job.failedReason;
return {
id: job.id,
@@ -323,6 +324,7 @@ export class QueueService {
progress,
result: returnValue,
data: job.data,
failedReason,
};
}
apps/web/src/components/QuickStart.tsx
+1 -1
View File
@@ -181,7 +181,7 @@ export function QuickStart({setupState, isLoading}: QuickStartProps) {
<CardDescription>Your project is fully set up</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-start gap-4 p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg border border-green-200">
<div className="flex items-start gap-4 p-4 bg-green-50 rounded-lg border border-green-200">
<div className="h-10 w-10 rounded-lg bg-green-100 border border-green-200 flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="h-5 w-5 text-green-700" />
</div>
apps/web/src/components/WorkflowBuilder.tsx
+4 -3
View File
@@ -12,7 +12,7 @@ import {
ReactFlow,
useEdgesState,
useNodesState,
useReactFlow,
useReactFlow
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import type {WorkflowStep} from '@plunk/db';
@@ -702,7 +702,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
return (
<>
<div className="w-full h-[800px] bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-lg border border-neutral-200 shadow-inner relative">
<div className="w-full h-[800px] bg-neutral-50 rounded-lg border border-neutral-200 shadow-inner relative">
<ReactFlow
nodes={nodes}
edges={edges}
@@ -821,7 +821,8 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
</DialogContent>
</Dialog>
{stepToDelete && (() => {
{stepToDelete &&
(() => {
const affectedSteps = getAffectedSteps(stepToDelete);
const stepToDeleteData = steps.find(s => s.id === stepToDelete);
const downstreamSteps = affectedSteps.filter(s => s.id !== stepToDelete);
apps/web/src/components/WorkflowVisualizer.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import {
Position,
ReactFlow,
useEdgesState,
useNodesState,
useNodesState
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import type {WorkflowStep} from '@plunk/db';
@@ -469,7 +469,7 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
}
return (
<div className="w-full h-[700px] bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-lg border border-neutral-200 shadow-inner">
<div className="w-full h-[700px] bg-neutral-50 rounded-lg border border-neutral-200 shadow-inner">
<ReactFlow
nodes={nodes}
edges={edges}
apps/web/src/pages/campaigns/[id].tsx
+16 -3
View File
@@ -25,7 +25,7 @@ import {
SelectItem,
SelectTrigger,
SelectValue,
StickySaveBar,
StickySaveBar
} from '@plunk/ui';
import type {Campaign, Segment} from '@plunk/db';
import {CampaignAudienceType, CampaignStatus} from '@plunk/db';
@@ -36,7 +36,20 @@ import {EmailEditor} from '../../components/EmailEditor';
import {network} from '../../lib/network';
import {formatFullDateTime, formatUTCDateTime, getUserTimezone, schedulePresets} from '../../lib/dateUtils';
import {useChangeTracking} from '../../lib/hooks/useChangeTracking';
import {ArrowLeft, Calendar, ChevronDown, Mail, MousePointer, Save, Send, TestTube, Trash2, TrendingUp, Users, XCircle} from 'lucide-react';
import {
ArrowLeft,
Calendar,
ChevronDown,
Mail,
MousePointer,
Save,
Send,
TestTube,
Trash2,
TrendingUp,
Users,
XCircle
} from 'lucide-react';
import Link from 'next/link';
import {useRouter} from 'next/router';
import {useEffect, useState} from 'react';
@@ -775,7 +788,7 @@ export default function CampaignDetailsPage() {
</div>
<div className="w-full bg-neutral-200 rounded-full h-3">
<div
className="bg-gradient-to-r from-blue-500 to-indigo-500 h-3 rounded-full transition-all duration-500"
className="bg-blue-500 h-3 rounded-full transition-all duration-500"
style={{width: `${(s.sentCount / s.totalRecipients) * 100}%`}}
/>
</div>
apps/web/src/pages/contacts/index.tsx
+35 -5
View File
@@ -308,7 +308,11 @@ export default function ContactsPage() {
)}
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={handlePreviousPage} disabled={currentPage === 0 || isLoading}>
<Button
variant="outline"
onClick={handlePreviousPage}
disabled={currentPage === 0 || isLoading}
>
<ChevronLeft className="h-4 w-4" />
Previous
</Button>
@@ -462,10 +466,24 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
const [progress, setProgress] = useState(0);
const [status, setStatus] = useState<'idle' | 'uploading' | 'processing' | 'completed' | 'failed'>('idle');
const [result, setResult] = useState<ImportResult | null>(null);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
const [showCloseConfirmDialog, setShowCloseConfirmDialog] = useState(false);
// Helper function to truncate long file names from the middle
const truncateFileName = (fileName: string, maxLength: number = 30) => {
if (fileName.length <= maxLength) return fileName;
const extension = fileName.substring(fileName.lastIndexOf('.'));
const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'));
const charsToShow = maxLength - extension.length - 3; // 3 for "..."
const frontChars = Math.ceil(charsToShow / 2);
const backChars = Math.floor(charsToShow / 2);
return `${nameWithoutExt.substring(0, frontChars)}...${nameWithoutExt.substring(nameWithoutExt.length - backChars)}${extension}`;
};
// Clean up polling on unmount or dialog close
useEffect(() => {
if (!open) {
@@ -480,6 +498,7 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
setProgress(0);
setStatus('idle');
setResult(null);
setErrorMessage(null);
}, 300);
}
}, [open]);
@@ -511,6 +530,7 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
state: string;
progress: number;
result: ImportResult | null;
failedReason?: string;
}>('GET', `/contacts/import/${jobId}`);
setProgress(response.progress || 0);
@@ -541,7 +561,10 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
clearInterval(pollIntervalRef.current);
pollIntervalRef.current = null;
}
toast.error('Import failed. Please try again.');
// Store and show the specific error message if available, otherwise show generic error
const errorMsg = response.failedReason || 'Import failed. Please check your CSV file and try again.';
setErrorMessage(errorMsg);
toast.error(errorMsg);
} else if (response.state === 'active') {
setStatus('processing');
}
@@ -579,7 +602,9 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
void pollJobStatus(data.jobId);
}, 1000); // Poll every second
} catch (error) {
toast.error(error instanceof Error ? error.message : 'Failed to upload file');
const errorMsg = error instanceof Error ? error.message : 'Failed to upload file';
setErrorMessage(errorMsg);
toast.error(errorMsg);
setStatus('failed');
} finally {
setIsUploading(false);
@@ -615,6 +640,9 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
<li>
Required column: <code className="bg-blue-100 px-1 rounded">email</code>
</li>
<li>
Optional: <code className="bg-blue-100 px-1 rounded">subscribed</code> (true/false, 1/0, yes/no)
</li>
<li>Optional: Add any custom fields (e.g., firstName, lastName, plan)</li>
<li>Maximum file size: 5MB</li>
</ul>
@@ -640,7 +668,7 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
type="button"
>
<FileUp className="h-4 w-4 mr-2" />
{file ? file.name : 'Choose CSV File'}
{file ? truncateFileName(file.name) : 'Choose CSV File'}
</Button>
</div>
</div>
@@ -725,7 +753,9 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
<XCircle className="h-5 w-5" />
<span className="font-medium">Import failed</span>
</div>
<p className="text-sm text-red-800 mt-1">Please check your CSV file and try again.</p>
<p className="text-sm text-red-800 mt-1">
{errorMessage || 'Please check your CSV file and try again.'}
</p>
</div>
)}
</div>
apps/web/src/pages/settings/index.tsx
+1 -1
View File
@@ -467,7 +467,7 @@ export default function Settings() {
{/* Danger Zone - Separate Card */}
<Card className="border-red-200 mt-6">
<CardHeader className="border-b border-red-100 bg-gradient-to-r from-red-50 to-orange-50">
<CardHeader className="border-b border-red-100 bg-red-50">
<div className="flex items-center gap-3">
<div className="p-2 bg-white rounded-lg shadow-sm border border-red-200">
<AlertTriangle className="h-5 w-5 text-red-600" />