dmail-admin/mvp-implementation-plan.md

🎯 DanakMail Template Builder MVP - Implementation Plan

📋 Executive Summary

This MVP combines the best features of Waypoint's template builder with your current Persian email template system to create a powerful, RTL-compatible email template builder.

🎨 Key Features to Implement

Phase 1: Core Block System (Week 1-2)

• ✅ Text Block: Rich text editing with Persian support
• ✅ Button Block: Customizable CTAs with styling
• ✅ Image Block: Upload/URL with responsive options
• ✅ Container Block: Layout wrapper with styling
• ✅ Spacer Block: Vertical spacing control

Phase 2: Drag & Drop Interface (Week 3-4)

• 🔄 Block Library: Sidebar with draggable blocks
• 🔄 Canvas Area: Drop zone for template building
• 🔄 Block Management: Add, remove, reorder blocks
• 🔄 Properties Panel: Context-sensitive editing

Phase 3: Template Variables (Week 5-6)

• 📝 Variable System: Dynamic content placeholders
• 📝 Test Data: Preview with sample data
• 📝 Conditional Logic: Show/hide based on data
• 📝 Loop Support: Repeat blocks with arrays

Phase 4: Export & Preview (Week 7-8)

• 📤 HTML Export: Email-compatible HTML
• 📤 Live Preview: Real-time template preview
• 📤 Mobile Preview: Responsive design testing
• 📤 Email Client Testing: Gmail, Outlook compatibility

🏗️ Architecture Overview

src/
├── pages/
│   └── email-builder/
│       ├── EmailBuilder.tsx          # Main builder interface
│       ├── components/
│       │   ├── blocks/               # Block components
│       │   │   ├── TextBlock.tsx
│       │   │   ├── ButtonBlock.tsx
│       │   │   ├── ImageBlock.tsx
│       │   │   ├── ContainerBlock.tsx
│       │   │   └── SpacerBlock.tsx
│       │   ├── panels/               # Side panels
│       │   │   ├── BlockLibrary.tsx
│       │   │   ├── PropertiesPanel.tsx
│       │   │   └── VariablesPanel.tsx
│       │   ├── canvas/               # Canvas area
│       │   │   ├── Canvas.tsx
│       │   │   ├── DropZone.tsx
│       │   │   └── BlockRenderer.tsx
│       │   └── preview/              # Preview system
│       │       ├── LivePreview.tsx
│       │       ├── MobilePreview.tsx
│       │       └── EmailPreview.tsx
│       ├── hooks/
│       │   ├── useEmailBuilder.ts
│       │   ├── useDragDrop.ts
│       │   └── useTemplateExport.ts
│       ├── store/
│       │   ├── builderStore.ts
│       │   └── templatesStore.ts
│       ├── types/
│       │   ├── blocks.ts
│       │   ├── template.ts
│       │   └── export.ts
│       └── utils/
│           ├── blockRenderers.ts
│           ├── htmlExporter.ts
│           └── templateValidator.ts

🔧 Technical Implementation

1. Block Interface Definition

// src/pages/email-builder/types/blocks.ts
interface BaseBlock {
  id: string
  type: BlockType
  data: BlockData
  style: BlockStyle
  responsive?: ResponsiveSettings
}

interface TextBlock extends BaseBlock {
  type: 'text'
  data: {
    content: string
    variables?: string[]
  }
  style: {
    fontSize: number
    fontWeight: string
    color: string
    textAlign: 'left' | 'center' | 'right'
    lineHeight: number
  }
}

interface ButtonBlock extends BaseBlock {
  type: 'button'
  data: {
    text: string
    url: string
    variables?: string[]
  }
  style: {
    backgroundColor: string
    textColor: string
    borderRadius: number
    padding: Spacing
    fontSize: number
  }
}

2. Drag & Drop Implementation

// src/pages/email-builder/hooks/useDragDrop.ts
import { useDragDropManager } from '@dnd-kit/core'

export const useDragDrop = () => {
  const { addBlock, moveBlock, removeBlock } = useEmailBuilderStore()
  
  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event
    
    if (active.data.current?.type === 'library-block') {
      // Add new block from library
      addBlock(active.data.current.blockType, over?.id)
    } else if (active.data.current?.type === 'canvas-block') {
      // Reorder existing blocks
      moveBlock(active.id, over?.id)
    }
  }
  
  return { handleDragEnd }
}

3. Template Variable System

// src/pages/email-builder/utils/templateProcessor.ts
export const processTemplate = (template: Template, variables: Record<string, any>) => {
  return template.blocks.map(block => {
    switch (block.type) {
      case 'text':
        return {
          ...block,
          data: {
            ...block.data,
            content: replaceVariables(block.data.content, variables)
          }
        }
      case 'button':
        return {
          ...block,
          data: {
            ...block.data,
            text: replaceVariables(block.data.text, variables),
            url: replaceVariables(block.data.url, variables)
          }
        }
      default:
        return block
    }
  })
}

const replaceVariables = (content: string, variables: Record<string, any>) => {
  return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return variables[key] || match
  })
}

4. HTML Export System

// src/pages/email-builder/utils/htmlExporter.ts
export const exportToHTML = (template: Template, options: ExportOptions) => {
  const styles = generateEmailStyles(template, options)
  const bodyHTML = renderBlocks(template.blocks, options)
  
  return `
    <!DOCTYPE html>
    <html dir="${options.rtlSupport ? 'rtl' : 'ltr'}">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>${template.name}</title>
      ${styles}
    </head>
    <body>
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td align="center">
            <table width="600" cellpadding="0" cellspacing="0" border="0">
              ${bodyHTML}
            </table>
          </td>
        </tr>
      </table>
    </body>
    </html>
  `
}

📊 Comparison Matrix

Feature	Current System	Waypoint	MVP Target
RTL Support	✅ Full	❌ None	✅ Full
Drag & Drop	❌ None	✅ Full	✅ Full
Block System	⚠️ Limited	✅ Rich	✅ Rich
Variables	❌ None	✅ LiquidJS	✅ Simple
Email Client Support	⚠️ Basic	✅ Full	✅ Full
Persian UI	✅ Full	❌ None	✅ Full
Template Library	✅ Basic	✅ Rich	✅ Rich
Live Preview	⚠️ Basic	✅ Advanced	✅ Advanced

🚀 Development Timeline

Week 1-2: Foundation

• Setup new email builder structure
• Implement basic block types
• Create block components
• Setup Zustand store

Week 3-4: Drag & Drop

• Install @dnd-kit/core
• Implement block library sidebar
• Create canvas drop zone
• Add block management

Week 5-6: Advanced Features

• Template variables system
• Properties panel
• Test data scenarios
• Conditional rendering

Week 7-8: Export & Polish

• HTML export optimization
• Email client testing
• Mobile responsive preview
• Performance optimization

💻 Getting Started

1. Install Dependencies:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
npm install react-beautiful-dnd @types/react-beautiful-dnd

2. Update Store Structure:

// Extend existing personality store
interface EmailBuilderStore extends PersonalityStore {
  blocks: Block[]
  template: Template
  variables: TemplateVariable[]
  addBlock: (type: BlockType, position?: number) => void
  updateBlock: (id: string, updates: Partial<Block>) => void
  removeBlock: (id: string) => void
}

3. Migration Path:

• Keep existing personality system
• Add new email builder alongside
• Gradually migrate users to new system
• Maintain backward compatibility

🎯 Success Metrics

• User Adoption: 80% of users try new builder within first month
• Template Creation Time: 50% reduction compared to current system
• Email Compatibility: 99% rendering across major clients
• Mobile Responsiveness: Perfect rendering on all devices
• Persian RTL Support: Flawless right-to-left layout

🔮 Future Enhancements (Post-MVP)

1. AI-Powered Templates: Generate templates from text descriptions
2. Collaboration: Real-time editing with team members
3. Analytics: Template performance tracking
4. A/B Testing: Compare template variants
5. Animation Support: CSS animations for email elements
6. Component Library: Reusable design system components

---

This MVP plan provides a clear roadmap to build a world-class email template builder that combines Waypoint's advanced features with your system's Persian/RTL strengths.