@autosmart/email-lib

A React component library for managing email templates with a vertical tabs interface and rich text editing capabilities.

Installation

npm install @autosmart/email-lib

Usage

import { EmailTemplateVerticalTabs } from '@autosmart/email-lib';

const EmailTemplatesManager = () => {
  const templates = [
    {
      id: '1',
      name: 'Welcome Email',
      subject: 'Welcome to our platform',
      content: 'Hello @firstName,\n\nWelcome to our platform!',
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    },
    // ... more templates
  ];

  const handleSave = (updatedTemplate) => {
    console.log('Template saved:', updatedTemplate);
    // Handle save logic
  };

  const handleDelete = (templateId) => {
    console.log('Template deleted:', templateId);
    // Handle delete logic
  };

  return (
    <EmailTemplateVerticalTabs
      templates={templates}
      onSave={handleSave}
      onDelete={handleDelete}
    />
  );
};

export default EmailTemplatesManager;

Features

• Vertical tabs interface for managing multiple templates
• Rich text editor with formatting options
• Mention functionality (type '@' to trigger)
• File attachments support
• Built-in styling (no need to import additional CSS)

Props

EmailTemplateVerticalTabs

interface Template {
  id: string;
  name: string;
  subject: string;
  content: string;
  createdAt: string;
  updatedAt: string;
  attachments?: File[];
}

interface EmailTemplateVerticalTabsProps {
  templates: Template[];
  onSave: (template: Template) => void;
  onDelete: (templateId: string) => void;
}

Variables Support

The component supports template variables that can be inserted using the '@' symbol. Default variables include:

• First Name (@firstName)
• Last Name (@lastName)
• Email (@email)
• Company Name (@companyName)
• Order Number (@orderNumber)
• Order Total (@orderTotal)

Notes

• All necessary styles are included in the package
• No need to import PrimeReact or Material-UI styles separately
• Compatible with React 16.8+ and TypeScript