\n {workflow ? 'Edit Workflow' : 'Create New Workflow'}\n

\n Build a custom follow-up sequence for your clients.\n

\n\n {error && (\n

⚠️

{error}

\n )}\n\n

\n {/* Workflow Settings */}\n

Workflow Settings

\n \n

\n \n Workflow Name *\n \n setName(e.target.value)}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"e.g., Standard Service Follow-up\"\n />\n

\n\n

\n \n Description\n \n setDescription(e.target.value)}\n rows={3}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"Describe this workflow...\"\n />\n

\n\n

\n \n Service Type *\n \n setServiceType(e.target.value)}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"e.g., Web Development, Consulting\"\n />\n

\n\n

Add Step

\n addStep('delay')}\n className=\"flex items-center justify-center p-2 border border-gray-300 rounded text-sm hover:bg-gray-50\"\n >\n ⏱️ Delay\n \n addStep('email')}\n className=\"flex items-center justify-center p-2 border border-gray-300 rounded text-sm hover:bg-gray-50\"\n >\n 📧 Email\n \n addStep('feedback_request')}\n className=\"flex items-center justify-center p-2 border border-gray-300 rounded text-sm hover:bg-gray-50\"\n >\n 📝 Feedback\n \n addStep('reminder')}\n className=\"flex items-center justify-center p-2 border border-gray-300 rounded text-sm hover:bg-gray-50\"\n >\n 🔔 Reminder\n \n

\n\n

\n \n {saving ? (\n <>\n

\n Saving...\n \n ) : (\n 'Save Workflow'\n )}\n \n \n Cancel\n \n

\n\n {/* Workflow Steps */}\n

Workflow Steps

\n \n {steps.length === 0 ? (\n

⚙️

No steps yet

Add steps to build your workflow sequence.

\n ) : (\n

\n {steps.map((step, index) => (\n updateStep(step.id, updates)}\n onRemove={() => removeStep(step.id)}\n onMove={(direction) => moveStep(step.id, direction)}\n />\n ))}\n

\n )}\n

\n );\n}\n\ninterface StepEditorProps {\n step: WorkflowStep;\n index: number;\n totalSteps: number;\n onUpdate: (updates: Partial) => void;\n onRemove: () => void;\n onMove: (direction: 'up' | 'down') => void;\n}\n\nfunction StepEditor({ step, index, totalSteps, onUpdate, onRemove, onMove }: StepEditorProps) {\n const [expanded, setExpanded] = useState(false);\n\n const getStepIcon = (type: WorkflowStep['type']): string => {\n switch (type) {\n case 'delay': return '⏱️';\n case 'email': return '📧';\n case 'feedback_request': return '📝';\n case 'reminder': return '🔔';\n default: return '⚙️';\n }\n };\n\n return (\n

\n {getStepIcon(step.type)}\n

\n {index + 1}. {step.title}\n

\n {step.type === 'delay' ? `Wait ${step.delayDays} day(s)` : step.type}\n

\n \n

\n onMove('up')}\n disabled={index === 0}\n className=\"p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n >\n ⬆️\n \n onMove('down')}\n disabled={index === totalSteps - 1}\n className=\"p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n >\n ⬇️\n \n setExpanded(!expanded)}\n className=\"p-1 text-gray-400 hover:text-gray-600\"\n >\n {expanded ? '🔼' : '🔽'}\n \n \n 🗑️\n \n

\n\n {expanded && (\n

\n \n Step Title\n \n onUpdate({ title: e.target.value })}\n className=\"w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n \n

\n \n Delay (days)\n \n onUpdate({ delayDays: parseInt(e.target.value) || 0 })}\n className=\"w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n \n Description\n \n onUpdate({ description: e.target.value })}\n rows={2}\n className=\"w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"Describe what this step does...\"\n />\n

\n\n {(step.type === 'email' || step.type === 'feedback_request' || step.type === 'reminder') && (\n

Email Template

\n \n

\n \n Subject Line\n \n onUpdate({\n emailTemplate: {\n ...step.emailTemplate!,\n subject: e.target.value\n }\n })}\n className=\"w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"Email subject...\"\n />\n

\n\n

\n \n Email Body\n \n onUpdate({\n emailTemplate: {\n ...step.emailTemplate!,\n body: e.target.value\n }\n })}\n rows={6}\n className=\"w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"Email content... Use {clientName}, {serviceName}, {companyName} for personalization\"\n />\n

\n\n

\n Available variables: {'{clientName}'}, {'{serviceName}'}, {'{companyName}'}\n {step.type === 'feedback_request' && ', {feedbackLink}'}\n

\n )}\n\n

\n onUpdate({ isActive: e.target.checked })}\n className=\"mr-2\"\n />\n \n Step is active\n \n

\n )}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/ampomah/untitled-2883/code/frontend/components/WorkflowBuilder.tsx","extension","actionData","errors"]