Quick DM Feature Implementation Plan

Goal

Build a simplified "Quick DM" automation interface that presents a linear, desktop-first view for creating and managing Instagram DM automations. Uses light theme matching Ant Design project styling. The UI generates the full flow editor payload in the background while providing a streamlined user experience.

[!IMPORTANT]

• Theme: Light theme, matching existing Ant Design project styles
• Layout: Desktop-first (mockups provided were mobile references)
• Tagging: UI present but marked as "Coming Soon"
• Product Card: Horizontal carousel of button templates (max 10), buttons include image upload

---

UI Analysis (From Mockups)

Screen 1: Automations List

Features:

• Search bar for keywords/responses
• "Active Rules" header with count badge
• Rule cards showing: keyword trigger, response preview, usage count, toggle, status badge

Screen 2: Linear Flow View

Sections:

Section	Flow Payload Mapping
ENTRY POINT	triggerComp node
MESSAGE STEP	messageReply node with templates
FLOW LOGIC	Tags (custom property), Delays (delay message type)
LEAD GEN PHASE	questionNode nodes
GOAL COMPLETED	Final messageReply node

Screen 3-4: Add Step Modal

Categories:

• BASIC CONTENT: Text Message, Image or GIF
• INTERACTIVE ELEMENTS: Button Template, Product Card
• LOGIC & FLOW: Smart Delay, Tagging
• LEAD GENERATION: Email, Phone, Name, etc.

Screen 5: Action Builder

Features:

• Trigger word input
• Initial message textarea
• Button actions with: action type (Send Message/Open Link), delay toggle, next message, tag contact

---

Proposed Changes

[NEW] src/pages/quick-dm/main.js

Main Quick DM page with routing between list and editor views.

[NEW] src/pages/quick-dm/main.css

Dark theme styling matching mockups.

[NEW] src/pages/quick-dm/comps/AutomationsList.js

• Displays all Quick DM rules
• Search functionality
• Active/inactive toggle
• Usage statistics

[NEW] src/pages/quick-dm/comps/LinearFlowView.js

• Renders flow as vertical timeline
• Sections: Entry Point, Message Step, Flow Logic, Lead Gen, Goal
• "Add Step" button opens modal

[NEW] src/pages/quick-dm/comps/AddStepModal.js

• Bottom sheet modal (Ant Design Drawer)
• Categorized step options
• Search functionality

[NEW] src/pages/quick-dm/comps/ActionBuilder.js

• Edit view for individual automation
• Trigger word configuration
• Button actions with delay/tag options
• Preview and activate buttons

[NEW] src/pages/quick-dm/utils/payloadBuilder.js

Utility functions to convert Quick DM state → Flow Editor payload:

// Example structure
export function buildFlowPayload(quickDMState) {
  return {
    name: quickDMState.name,
    live: quickDMState.active,
    nodes: [
      buildTriggerNode(quickDMState.trigger),
      ...buildMessageNodes(quickDMState.messages),
      ...buildQuestionNodes(quickDMState.leadGenFields),
      buildConfirmationNode(quickDMState.confirmation)
    ],
    edges: buildEdges(nodes)
  };
}

[MODIFY] src/App.js

Add route for /quick-dm and /quick-dm/:id.

---

Quick DM State → Flow Payload Mapping

Quick DM Field	Flow Payload Location
Trigger keyword	nodes[0].data.auto_reply.dm_reply.triger_words
Initial message	nodes[1].data.messages[0].text
Button template	nodes[1].data.messages[0].templates
Smart delay	Insert {type: "delay"} message
Tag contact	nodes[x].data.tag (custom field)
Request Email	Add questionNode with question_type: "email"
Request Phone	Add questionNode with question_type: "phone"
Confirmation	Final messageReply node

---

Component Hierarchy

QuickDM (main.js)
├── AutomationsList
│   └── AutomationCard (×n)
└── LinearFlowView
    ├── EntryPointSection
    ├── MessageStepSection
    ├── FlowLogicSection
    ├── LeadGenSection
    ├── GoalSection
    ├── AddStepModal
    └── ActionBuilder (for editing)

---

Verification Plan

[!WARNING] No automated tests exist for the flow editor. Manual testing is required.

Manual Testing Steps

1. Navigation Test

   • Navigate to /quick-dm
   • Verify Automations List loads
   • Click "Create New" → verify editor opens

2. Create Automation Test

   • Open Action Builder
   • Enter trigger word: "test123"
   • Add initial message: "Hello!"
   • Add button with "View More" label
   • Enable 3s delay
   • Add email collection
   • Click "Finish & Activate"
   • Verify automation appears in list

3. Payload Verification

   • After saving, check browser DevTools → Network tab
   • Verify POST to /flow_editor contains correct payload structure
   • Confirm nodes array has: triggerComp, messageReply, questionNode

4. Toggle Test

   • Toggle automation off from list
   • Verify API call updates live: false
   • Toggle back on, verify live: true

5. Edit Test

   • Click existing automation
   • Modify trigger word
   • Save and verify changes persist

---

Clarifications Received

Item	Decision
Theme	Light theme, matching Ant Design project styles
Layout	Desktop-first (mobile mockups as reference only)
Tagging	UI present, marked "Coming Soon"
Product Card	Horizontal carousel of button templates (max 10 cards), each button can include image upload