Update automations docs and fix default flow publishing

- Rewrite HelpAutomations.tsx and HelpAutomationDocs.tsx for Activepieces
- Update automations section in HelpComprehensive.tsx
- Add Automations link to HelpGuide.tsx
- Fix default flow publishing: remove immediate enable call that caused 409 conflict
- LOCK_AND_PUBLISH triggers async enable, no need for separate status update
- Add 2.5s delay before iframe refresh after restore to allow async processing
- Show loading spinner during delay for better UX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-22 00:48:34 -05:00
parent 961dbf0a96
commit 2f22d80b9e
8 changed files with 1369 additions and 3241 deletions

View File

@@ -59,6 +59,7 @@ export default function Automations() {
const restoreAll = useRestoreAllFlows();
const [showFlowsMenu, setShowFlowsMenu] = useState(false);
const [confirmRestore, setConfirmRestore] = useState<{ type: 'all' | string; name: string } | null>(null);
const [isProcessing, setIsProcessing] = useState(false);
// Fetch embed token for Activepieces
const {
@@ -255,13 +256,21 @@ export default function Automations() {
onClose={() => setConfirmRestore(null)}
onConfirm={() => {
const refreshIframe = () => {
// Reset iframe state and increment key to force remount
initSentRef.current = false;
setAuthenticated(false);
setIframeReady(false);
setRefreshKey((k) => k + 1);
refetch();
setConfirmRestore(null);
// Show processing state while waiting for Activepieces
setIsProcessing(true);
// Wait for Activepieces async processing to complete (~2 seconds)
// before refreshing the iframe to show updated flow status
setTimeout(() => {
// Reset iframe state and increment key to force remount
initSentRef.current = false;
setAuthenticated(false);
setIframeReady(false);
setRefreshKey((k) => k + 1);
refetch();
setConfirmRestore(null);
setIsProcessing(false);
}, 2500);
};
if (confirmRestore?.type === 'all') {
@@ -287,7 +296,7 @@ export default function Automations() {
}
confirmText={t('automations.restore.confirm', 'Restore')}
variant="warning"
isLoading={restoreFlow.isPending || restoreAll.isPending}
isLoading={restoreFlow.isPending || restoreAll.isPending || isProcessing}
/>
{/* Header */}

View File

@@ -21,6 +21,7 @@ import {
Mail,
CreditCard,
Puzzle,
Workflow,
Settings,
ChevronRight,
HelpCircle,
@@ -77,8 +78,9 @@ const HelpGuide: React.FC = () => {
},
{
title: 'Extend',
description: 'Add functionality with plugins',
description: 'Add functionality with automations and plugins',
links: [
{ label: 'Automations', path: '/dashboard/help/automations', icon: <Workflow size={18} /> },
{ label: 'Plugins', path: '/dashboard/help/plugins', icon: <Puzzle size={18} /> },
],
},

File diff suppressed because it is too large Load Diff

View File

@@ -1,7 +1,7 @@
/**
* Help Automations Page
*
* User-friendly help documentation for Automations.
* User-friendly help documentation for Automations powered by Activepieces.
*/
import React from 'react';
@@ -9,21 +9,25 @@ import { useTranslation } from 'react-i18next';
import { useNavigate, Link } from 'react-router-dom';
import {
ArrowLeft,
Puzzle,
Store,
Code,
Workflow,
Zap,
Clock,
CheckCircle,
Mail,
CreditCard,
Bell,
ChevronRight,
HelpCircle,
Play,
Pause,
Settings,
Mail,
BookOpen,
Sparkles,
RotateCcw,
Calendar,
ListTodo,
Users,
FileText,
Send,
Search,
Puzzle,
} from 'lucide-react';
const HelpAutomations: React.FC = () => {
@@ -45,112 +49,268 @@ const HelpAutomations: React.FC = () => {
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">
<div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
<Puzzle size={24} className="text-brand-600 dark:text-brand-400" />
<Workflow size={24} className="text-brand-600 dark:text-brand-400" />
</div>
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
Automations Guide
</h1>
<p className="text-gray-500 dark:text-gray-400">
Automate your business with powerful automations
Create powerful workflows with visual automation builder
</p>
</div>
</div>
</div>
{/* Powered by Activepieces Notice */}
<section className="mb-10">
<div className="bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 rounded-xl border border-purple-200 dark:border-purple-800 p-6">
<div className="flex items-start gap-4">
<Puzzle size={24} className="text-purple-600 dark:text-purple-400 mt-1 flex-shrink-0" />
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
Powered by Activepieces
</h3>
<p className="text-gray-600 dark:text-gray-300">
SmoothSchedule automations are built on <strong>Activepieces</strong>, an open-source
automation platform. If you're familiar with Activepieces, you'll feel right at home -
the workflow builder works exactly the same way. We've added custom SmoothSchedule
triggers and actions to connect your scheduling data to thousands of other apps.
</p>
</div>
</div>
</div>
</section>
{/* Overview Section */}
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Puzzle size={20} className="text-brand-500" />
<Workflow size={20} className="text-brand-500" />
Overview
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Automations extend your scheduling platform with powerful automation capabilities. Send reminder emails,
generate reports, track no-shows, and create custom workflows - all running automatically
on schedules you define.
</p>
<p className="text-gray-600 dark:text-gray-300">
Browse the marketplace for ready-made automations, or create your own custom automations
using our simple scripting language.
The Automations page provides a visual workflow builder where you can create automated
processes that run when specific events happen in your business. Connect SmoothSchedule
to hundreds of other apps like Google Sheets, Slack, Mailchimp, and more.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div className="text-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Sparkles size={24} className="mx-auto text-purple-500 mb-2" />
<h4 className="font-medium text-gray-900 dark:text-white">AI Copilot</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Describe what you want in plain English</p>
</div>
<div className="text-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Puzzle size={24} className="mx-auto text-blue-500 mb-2" />
<h4 className="font-medium text-gray-900 dark:text-white">1000+ Integrations</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Connect to popular apps and services</p>
</div>
<div className="text-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Zap size={24} className="mx-auto text-yellow-500 mb-2" />
<h4 className="font-medium text-gray-900 dark:text-white">Pre-built Flows</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Start with ready-to-use templates</p>
</div>
</div>
</div>
</section>
{/* Automation Areas Section */}
{/* Default Flows Section */}
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Settings size={20} className="text-brand-500" />
Automation Areas
<Zap size={20} className="text-brand-500" />
Default Flows (Pre-configured)
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Store size={20} className="text-blue-500 mt-0.5" />
<p className="text-gray-600 dark:text-gray-300 mb-4">
Every SmoothSchedule account comes with these default automation flows pre-configured
and ready to use. They're located in the "Defaults" folder in your automations.
</p>
<div className="space-y-4">
<div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
<Mail size={20} className="text-green-600 dark:text-green-400 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Marketplace</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Browse and install pre-built automations from our library</p>
<h4 className="font-medium text-gray-900 dark:text-white">Appointment Confirmation Email</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Automatically sends a confirmation email when a new appointment is booked
</p>
</div>
</div>
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Puzzle size={20} className="text-green-500 mt-0.5" />
<div className="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<Bell size={20} className="text-blue-600 dark:text-blue-400 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">My Automations</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Manage your installed and custom automations</p>
<h4 className="font-medium text-gray-900 dark:text-white">Appointment Reminder Email</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Sends reminder emails before appointments (timing based on your service settings)
</p>
</div>
</div>
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Code size={20} className="text-purple-500 mt-0.5" />
<div className="flex items-start gap-3 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<CreditCard size={20} className="text-purple-600 dark:text-purple-400 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Create Automation</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Build custom automations with our scripting tools</p>
<h4 className="font-medium text-gray-900 dark:text-white">Deposit Payment Confirmation</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Sends a confirmation when a deposit payment is received
</p>
</div>
</div>
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<ListTodo size={20} className="text-orange-500 mt-0.5" />
<div className="flex items-start gap-3 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
<CreditCard size={20} className="text-amber-600 dark:text-amber-400 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Tasks</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">View and manage scheduled automation executions</p>
<h4 className="font-medium text-gray-900 dark:text-white">Final Payment Confirmation</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Sends a receipt when the final payment is completed
</p>
</div>
</div>
<div className="flex items-start gap-3 p-4 bg-pink-50 dark:bg-pink-900/20 rounded-lg border border-pink-200 dark:border-pink-800">
<Mail size={20} className="text-pink-600 dark:text-pink-400 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Thank You Email</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Sends a thank you message after payment is completed
</p>
</div>
</div>
</div>
{/* Restore Defaults Note */}
<div className="mt-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<div className="flex items-start gap-2">
<RotateCcw size={18} className="text-gray-500 mt-0.5" />
<div>
<p className="text-sm text-gray-600 dark:text-gray-300">
<strong>Restore Defaults:</strong> If you've modified a default flow and want to
restore it to the original, use the "Restore Defaults" button in the Automations
page header.
</p>
</div>
</div>
</div>
</div>
</section>
{/* What Automations Can Do */}
{/* SmoothSchedule Triggers */}
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Zap size={20} className="text-brand-500" />
What Automations Can Do
<Play size={20} className="text-brand-500" />
SmoothSchedule Triggers
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<div className="space-y-4">
<div className="flex items-start gap-3">
<Mail size={18} className="text-blue-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Send Emails</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Automated reminders, follow-ups, and notifications to customers</p>
</div>
</div>
<div className="flex items-start gap-3">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Triggers start your automation when something happens. SmoothSchedule provides these triggers:
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Calendar size={18} className="text-green-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Manage Appointments</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Query, filter, and process appointment data automatically</p>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Event Created</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">When a new appointment is booked</p>
</div>
</div>
<div className="flex items-start gap-3">
<Clock size={18} className="text-purple-500 mt-0.5" />
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Calendar size={18} className="text-blue-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Run on Schedules</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Execute hourly, daily, weekly, or on custom cron schedules</p>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Event Updated</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">When an appointment is modified</p>
</div>
</div>
<div className="flex items-start gap-3">
<Zap size={18} className="text-orange-500 mt-0.5" />
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Calendar size={18} className="text-red-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">External Integrations</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Connect to approved external APIs for advanced workflows</p>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Event Cancelled</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">When an appointment is cancelled</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Calendar size={18} className="text-purple-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Event Status Changed</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">When status changes (confirmed, completed, etc.)</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<CreditCard size={18} className="text-emerald-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Payment Received</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">When a payment is completed (deposit or final)</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Clock size={18} className="text-orange-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Upcoming Events</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Polls for appointments happening soon</p>
</div>
</div>
</div>
</div>
</section>
{/* SmoothSchedule Actions */}
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Settings size={20} className="text-brand-500" />
SmoothSchedule Actions
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Actions are the things your automation does. Use these SmoothSchedule actions in your flows:
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Send size={18} className="text-blue-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Send Email</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Send emails using your templates</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Calendar size={18} className="text-green-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Create Event</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Create a new appointment</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Calendar size={18} className="text-yellow-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Update Event</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Modify an existing appointment</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Calendar size={18} className="text-red-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Cancel Event</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Cancel an appointment</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Search size={18} className="text-purple-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Find Events</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Search appointments by criteria</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Users size={18} className="text-indigo-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">List Customers</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Get customer data for use in flows</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Users size={18} className="text-pink-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">List Inactive Customers</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Find customers who haven't booked recently</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<FileText size={18} className="text-teal-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">List Resources/Services</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Get your resources and services data</p>
</div>
</div>
</div>
@@ -168,62 +328,52 @@ const HelpAutomations: React.FC = () => {
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Browse Marketplace</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Go to Automations &rarr; Marketplace to explore available automations.</p>
<h4 className="font-medium text-gray-900 dark:text-white">Open Automations</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Go to <strong>Automations</strong> in the sidebar to open the workflow builder.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Install an Automation</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Click "Install" on any automation to add it to your account.</p>
<h4 className="font-medium text-gray-900 dark:text-white">Create a New Flow</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Click <strong>+ New Flow</strong> to start building, or use the AI Copilot to describe what you want.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Configure & Schedule</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Set up automation options and choose when it should run.</p>
<h4 className="font-medium text-gray-900 dark:text-white">Choose a Trigger</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Select what starts your automation (e.g., "Event Created" from SmoothSchedule).
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Monitor Tasks</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">View execution history and logs in the Tasks page.</p>
<h4 className="font-medium text-gray-900 dark:text-white">Add Actions</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Add steps that run when the trigger fires. Use SmoothSchedule actions or connect other apps.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Test & Publish</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Test your flow with sample data, then publish it to start running automatically.
</p>
</div>
</li>
</ol>
</div>
</section>
{/* Task Management */}
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<ListTodo size={20} className="text-brand-500" />
Managing Tasks
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
When you install an automation, it creates a scheduled task that runs automatically. Use the Tasks page to:
</p>
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
<li className="flex items-center gap-2">
<Play size={16} className="text-green-500" />
<span><strong>Run manually:</strong> Execute a task immediately without waiting for the schedule</span>
</li>
<li className="flex items-center gap-2">
<Pause size={16} className="text-yellow-500" />
<span><strong>Pause/Resume:</strong> Temporarily stop a task without deleting it</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-blue-500" />
<span><strong>View logs:</strong> See execution history and any errors</span>
</li>
</ul>
</div>
</section>
{/* Developer Documentation Link */}
<section className="mb-10">
<div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
@@ -231,17 +381,17 @@ const HelpAutomations: React.FC = () => {
<BookOpen size={24} className="text-brand-600 dark:text-brand-400 mt-1" />
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
Creating Custom Automations
Complete Documentation
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Want to build your own automations? Our comprehensive developer documentation covers
the scripting language, available API methods, and example code.
For detailed information about triggers, actions, template variables, and advanced
workflow patterns, see our comprehensive automation documentation.
</p>
<Link
to="/dashboard/help/automations/docs"
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
>
View Developer Docs
View Full Documentation
<ChevronRight size={16} />
</Link>
</div>

View File

@@ -15,6 +15,7 @@ import {
Plus, Edit, Trash2, ArrowUpDown, GripVertical, Image, Save, ExternalLink,
MessageSquare, Tag, UserPlus, Shield, Copy, Layers, Play, Pause, Puzzle,
FileSignature, Send, Download, Link as LinkIcon, CalendarOff, MapPin, Code,
Workflow, Sparkles, RotateCcw,
} from 'lucide-react';
interface TocSubItem {
@@ -57,7 +58,7 @@ const HelpComprehensive: React.FC = () => {
{ id: 'time-blocks', label: t('helpComprehensive.toc.timeBlocks'), icon: <CalendarOff size={16} /> },
{ id: 'locations', label: 'Locations', icon: <MapPin size={16} /> },
{ id: 'site-builder', label: 'Site Builder', icon: <Layers size={16} /> },
{ id: 'automations', label: 'Automations', icon: <Puzzle size={16} /> },
{ id: 'automations', label: 'Automations', icon: <Workflow size={16} /> },
{ id: 'contracts', label: t('helpComprehensive.toc.contracts'), icon: <FileSignature size={16} /> },
{ id: 'api', label: 'API', icon: <Code size={16} /> },
{
@@ -849,73 +850,119 @@ const HelpComprehensive: React.FC = () => {
<section id="automations" className="mb-16 scroll-mt-24">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
<Puzzle size={20} className="text-indigo-600 dark:text-indigo-400" />
<Workflow size={20} className="text-indigo-600 dark:text-indigo-400" />
</div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Automations</h2>
</div>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
{/* Powered by Activepieces notice */}
<div className="flex items-center gap-2 px-3 py-2 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg mb-4 text-sm">
<Zap size={16} className="text-indigo-600 dark:text-indigo-400" />
<span className="text-indigo-700 dark:text-indigo-300">
<strong>Powered by Activepieces</strong> If you're familiar with Activepieces, our automation system works the same way.
</span>
</div>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Automations allow you to automate repetitive tasks and workflows. Send reminders, generate reports, clean up old data, and integrate with external services automatically.
Build powerful automation workflows with our visual flow builder. Connect triggers to actions to automate appointment confirmations, reminders, payment notifications, and integrations with hundreds of external services.
</p>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">What Automations Can Do</h3>
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<div className="flex items-center gap-2 mb-2">
<Sparkles size={18} className="text-purple-600 dark:text-purple-400" />
<h4 className="font-medium text-gray-900 dark:text-white">AI Copilot</h4>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400">Describe what you want in plain English and let AI build the flow for you</p>
</div>
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<div className="flex items-center gap-2 mb-2">
<Puzzle size={18} className="text-blue-600 dark:text-blue-400" />
<h4 className="font-medium text-gray-900 dark:text-white">200+ Integrations</h4>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400">Connect to Slack, Google Sheets, Discord, Mailchimp, and hundreds more</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
<div className="flex items-center gap-2 mb-2">
<RotateCcw size={18} className="text-green-600 dark:text-green-400" />
<h4 className="font-medium text-gray-900 dark:text-white">Default Flows</h4>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400">Pre-built flows for common tasks like confirmations and reminders</p>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">SmoothSchedule Triggers</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
Start your automation when something happens in SmoothSchedule:
</p>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
<div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-blue-700 dark:text-blue-300">Event Created</span>
</div>
<div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-green-700 dark:text-green-300">Event Updated</span>
</div>
<div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-red-700 dark:text-red-300">Event Cancelled</span>
</div>
<div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-orange-700 dark:text-orange-300">Status Changed</span>
</div>
<div className="p-2 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-emerald-700 dark:text-emerald-300">Payment Received</span>
</div>
<div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-purple-700 dark:text-purple-300">Upcoming Events</span>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">SmoothSchedule Actions</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
Perform actions in SmoothSchedule from any trigger:
</p>
<ul className="grid grid-cols-2 gap-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>Send Emails:</strong> Automatic appointment reminders, confirmations, and follow-ups</span>
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>Send Email (with templates)</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>Webhooks:</strong> Integrate with external services like Zapier, Slack, or your own APIs</span>
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>Create Event</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>Generate Reports:</strong> Automatic daily, weekly, or monthly business reports</span>
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>Update Event</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>Data Cleanup:</strong> Automatically archive or delete old appointments and data</span>
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>Cancel Event</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>Find Events</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>List Customers</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>List Resources</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} className="text-green-500 flex-shrink-0" />
<span>List Services</span>
</li>
</ul>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Automation Types</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div className="p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
<h4 className="font-medium text-gray-900 dark:text-white mb-1">Marketplace Automations</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Pre-built automations ready to install and configure</p>
</div>
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<h4 className="font-medium text-gray-900 dark:text-white mb-1">Custom Automations</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Build your own automations with custom logic and actions</p>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Triggers</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
Automations can be triggered at different points in the appointment lifecycle:
</p>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
<div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-blue-700 dark:text-blue-300">Before Event</span>
</div>
<div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-green-700 dark:text-green-300">At Start</span>
</div>
<div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-orange-700 dark:text-orange-300">After End</span>
</div>
<div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-purple-700 dark:text-purple-300">On Status Change</span>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Learn More</h3>
<Link to="/dashboard/help/automations/docs" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<Puzzle size={24} className="text-indigo-500" />
<Workflow size={24} className="text-indigo-500" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Automation Documentation</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Complete guide to creating and configuring automations</p>
<p className="text-sm text-gray-500 dark:text-gray-400">Complete guide to triggers, actions, default flows, and building custom workflows</p>
</div>
<ChevronRight size={20} className="text-gray-400 ml-auto" />
</Link>

View File

@@ -366,15 +366,15 @@ def _provision_default_flows_for_tenant(tenant_id):
f"Failed to save sample data for flow {flow_type}: {e}"
)
# Publish the flow (locks version and enables)
# Publish the flow (LOCK_AND_PUBLISH triggers async enable)
# Note: The flow will become ENABLED after background processing
# completes - don't try to enable immediately as it causes 409
try:
client.publish_flow(flow_id, session_token)
except Exception as e:
logger.warning(
f"Failed to publish flow {flow_type}, enabling instead: {e}"
f"Failed to publish flow {flow_type}: {e}"
)
# Fallback to just enabling
client.update_flow_status(flow_id, session_token, enabled=True)
# Store the flow record in Django
TenantDefaultFlow.objects.create(

View File

@@ -427,14 +427,19 @@ class ActivepiecesClient:
Uses the LOCK_AND_PUBLISH operation which:
1. Locks the current version
2. Makes it the published (active) version
3. Enables the flow
3. Triggers async background processing to set up triggers
4. Flow becomes ENABLED once background processing completes
Note: The flow status will show DISABLED immediately after this call,
but will become ENABLED after background processing (typically <1 sec).
Do NOT call update_flow_status() right after - it will cause a 409 Conflict.
Args:
flow_id: The Activepieces flow ID
token: Session token for API calls
Returns:
Updated flow object
Updated flow object (status may still show DISABLED initially)
"""
return self._request(
"POST",

View File

@@ -348,13 +348,13 @@ class DefaultFlowRestoreView(TenantRequiredAPIView, APIView):
except Exception as e:
logger.warning(f"Failed to save sample data for flow {flow_type}: {e}")
# Publish the flow (locks version and enables)
# Publish the flow (LOCK_AND_PUBLISH triggers async enable)
# Note: The flow will become ENABLED after background processing
# completes - don't try to enable immediately as it causes 409
try:
client.publish_flow(new_flow_id, token)
except Exception as e:
logger.warning(f"Failed to publish flow {flow_type}, enabling instead: {e}")
# Fallback to just enabling
client.update_flow_status(new_flow_id, token, enabled=True)
logger.warning(f"Failed to publish flow {flow_type}: {e}")
# Update the Django record
default_flow.activepieces_flow_id = new_flow_id
@@ -473,15 +473,15 @@ class DefaultFlowsRestoreAllView(TenantRequiredAPIView, APIView):
f"Failed to save sample data for flow {default_flow.flow_type}: {e}"
)
# Publish the flow (locks version and enables)
# Publish the flow (LOCK_AND_PUBLISH triggers async enable)
# Note: The flow will become ENABLED after background processing
# completes - don't try to enable immediately as it causes 409
try:
client.publish_flow(new_flow_id, token)
except Exception as e:
logger.warning(
f"Failed to publish flow {default_flow.flow_type}, enabling instead: {e}"
f"Failed to publish flow {default_flow.flow_type}: {e}"
)
# Fallback to just enabling
client.update_flow_status(new_flow_id, token, enabled=True)
# Update the Django record
default_flow.activepieces_flow_id = new_flow_id