SeloraX Flow

SeloraX Flow is a visual workflow automation app that lets merchants create multi-step automations triggered by store events — new orders, stock changes, customer actions, and more. No coding required.

How It Works

1. Merchant installs SeloraX Flow from the app marketplace
2. A "Flow" link appears in the dashboard sidebar (via navigation.link extension)
3. Merchant creates workflows using the drag-and-drop builder
4. Workflows trigger automatically when events occur

Workflow Structure

Every workflow has:

• Trigger — The event that starts the workflow (e.g., order.created)
• Steps — A sequence of conditions, actions, and wait delays

Triggers (11 types)

Trigger	Category	Description
order.created	Orders	New order placed
order.status_changed	Orders	Order status updated
order.payment_confirmed	Orders	Payment confirmed
order.cancelled	Orders	Order cancelled
product.stock_low	Products	Stock below threshold
product.out_of_stock	Products	Product out of stock
customer.registered	Customers	New customer registered
customer.first_order	Customers	Customer's first order
schedule.cron	Schedule	Recurring schedule
webhook.received	Integrations	External webhook received
manual.trigger	Manual	Triggered manually by admin

Step Types

Condition — Branch the workflow based on rules (if/else). Supports AND/OR logic with fields like order.total, order.status, customer.order_count, product.stock, time.hour.

Action — Perform an operation:

• Update order status, add notes, assign to team, add tags
• Update product stock, toggle visibility
• Tag customers, update customer groups
• Send SMS, email, push notifications
• Call external webhooks
• Stop the workflow

Wait — Pause for a duration (minutes, hours, or days) before continuing.

Architecture

Flow consists of two services:

• Flow Backend (Express, port 4400) — Workflow CRUD, execution engine, trigger matching
• Flow Frontend (Next.js, port 3002) — Visual builder, templates, analytics, activity feed

Visual Builder

The builder uses @xyflow/react (React Flow v12) for the canvas. Workflows are edited as a node graph and serialized to a flat steps JSON format for the backend.

Node types: triggerNode, conditionNode, actionNode, waitNode, addButtonNode

Serialization

The lib/serializer.js module converts between:

• Canvas format — React Flow nodes + edges (visual positions, connections)
• Backend format — Flat steps array with nested true_steps/false_steps for conditions

Template Library

Flow includes 9 pre-built workflow templates:

• Auto-Confirm COD Orders
• Low Stock Email Alert
• Welcome New Customer
• VIP First Order Flow
• Cancelled Order Follow-up
• Hide Out-of-Stock Products
• Auto-Assign by District
• Payment Confirmation Notification
• Daily Sales Report

Dashboard Integration

Flow registers as a first-party app via startup/seedFlowApp.js in the SeloraX Backend. It auto-installs for all stores and adds:

• navigation.link extension — "Flow" in the dashboard sidebar with Zap icon
• dashboard.widget extension — Workflow status card on the dashboard

The app renders in the dashboard's embedded app page (/settings/apps/e/selorax-flow) via iframe.

API Endpoints

Method	Endpoint	Description
GET	/workflows?store_id={id}	List all workflows
GET	/workflows/{id}?store_id={id}	Get single workflow with steps
POST	/workflows	Create workflow
PUT	/workflows/{id}	Update workflow
DELETE	/workflows/{id}?store_id={id}	Delete workflow
POST	/workflows/{id}/execute	Test-run a workflow
GET	/executions?store_id={id}	List all executions
GET	/executions?store_id={id}&workflow_id={id}	Executions for a workflow

Keyboard Shortcuts (Builder)

Shortcut	Action
Cmd/Ctrl + S	Save workflow
Cmd/Ctrl + Z	Undo
Cmd/Ctrl + Shift + Z	Redo
Delete / Backspace	Delete selected node
Escape	Deselect node / close panel